CSS自动换行导致div后空格溢出答案

【问题标题】：CSS word-wrap causes whitespace overflow after divCSS自动换行导致div后空格溢出
【发布时间】：2012-05-25 21:32:46
【问题描述】：

我正在使用 CSS word-wrap 属性（设置为 break-word）在固定宽度和可变高度的 div 元素中完整地显示单个无间距字符串。 div 元素本身位于表格单元格<td> 中。分词按预期工作，以定义的固定宽度分词。但是，在 IE9（使用 IE7 文档标准）中，在 div 之后似乎有一些额外的空间，导致表格单元格在宽度上扩展（不需要）。 div 宽度本身似乎是正确的，由其 CSS 指定。我使用 div 和表格单元格周围的边框来验证。我已经尝试明确设置表格单元格宽度（和最大宽度），但两种方法都不起作用。在 Firefox 或 Chrome 中未观察到此行为。

编辑：添加示例代码here。该问题仅在 IE 中出现（Browser_Mode=IE9；Document_Mode=IE7）。

【问题讨论】：

标签： css internet-explorer html word-wrap

【解决方案1】：

显然td 正在为单词的全长腾出空间，就好像它没有中断一样。您可以通过在 div 上设置 overflow: hidden 来防止这种情况发生。

jsFiddle：http://jsfiddle.net/gmDpe/6/

【讨论】：

【解决方案2】：

我曾经遇到过类似的问题。您是否尝试在表格元素上使用table-layout : fixed？

table-layout 是一个鲜为人知的 widely supported 属性，在这种情况下非常有用。

【讨论】：

感谢您的意见。但是，table-layout 属性无法解决问题。
真的吗？我在您提交的示例中使用了table-layout: fixed，它看起来应该在 IE7 中。
是的，这个属性确实解决了我提供的示例。我的生产表格实际上并没有明确定义的宽度，这可能是表格布局在那里不起作用的原因。谢谢。