自动换行：在td内使用div的break-word

I'm trying to use the CSS word-wrap property with break-word value. I want to use this inside a td, and apparently need to use a additional div tag for this to work. fine.

我正在尝试使用带有break-word值的CSS word-wrap属性。我想在td中使用它,显然需要使用额外的div标签才能工作。精细。

I tried to build a simplified use-case:

我试图构建一个简化的用例:

HTML:

<table class="sectors">
  <tr>
    <td><div>HURTEAUX / Jean-Baptiste mr)</div></td>
    <td><div>CHEUNJGgdfgdfvfsefsdfsdfsdfsdvvvHJG / Samuel mr</div></td>
    <td><div>CHEUNG / Samuel mr)</div></td>
  </tr>
</table>

CSS

.sectors td {
  border: 1px solid #000;
}

.sectors td div {
  width: 150px;
  word-wrap: break-word;
  border: 1px solid red;
}

The problem

Firefox, Chrome and Safari behave as expected (at least as I expect).

Firefox,Chrome和Safari的行为符合预期(至少和我预期的一样)。

screenshot on Firefox 3.5

Firefox 3.5上的截图

But IE (IE6, IE7, IE8) has a strange behavior: the text is properly wrapped inside the div (red border), but it seems the td (black border) is allocating extra space for no reason.

但IE(IE6,IE7,IE8)有一个奇怪的行为:文本被正确包装在div(红色边框)内,但似乎td(黑色边框)无缘无故地分配额外的空间。

screenshot on IE7

在IE7上截图

Any workaround or explanation?

任何解决方法或解释?

1 个解决方案

#1

Adding overflow:hidden to the div should sort it out. Can't offer an explanation though, sorry!

添加溢出:隐藏到div应该排序。不过不能提供解释,对不起!