为什么我的 html 表格“最大宽度”不会导致文本换行？答案

【问题标题】：Why does my html table 'max-width' not cause text to wrap?为什么我的 html 表格“最大宽度”不会导致文本换行？
【发布时间】：2011-02-09 04:12:52
【问题描述】：

我有一个 html 表格，其中一列（或 <td>）包含很长的单词。我想设置列的最大宽度，以便如果文本长于最大宽度，则文本应自动换行到下一行。我尝试使用"max-width:100px" 在适当的<td> 元素上设置css max-width 样式，但它不起作用。文本仍然很长，不会自动换行到下一行。

任何想法有什么问题或任何解决方案参考代码？我在 Windows 7 上使用 IE 8。

【问题讨论】：

css 2.1 specification 中指定：“在 CSS 2.1 中，'min-width' 和 'max-width' 对表格、内联表格、表格单元格、表格列和列组的影响是未定义。”

标签： html css

【解决方案1】：

您需要添加 CSS3 属性 word-wrap: break-word;。

【讨论】：

@George2 这个 css 属性是为了允许一个长单词被打断。如果它确实解决了您的问题，那么您的问题似乎漏掉了一点：您的文本不仅很长，而且包含很长的单词。
我对问题进行了复制编辑，以明确文本包含长词，而不仅仅是长文本。
我将word-wrap: break-word; 添加到table 的样式中，并将max-width 添加到td 元素中。它在 Chrome 中有效，但在 IE8 中无效：长字仍在一行中。有什么建议吗？
@duskat：IE8 fails on max-width in several elements。请改用width。
@BalusC 感谢您指出 IE8 问题，我改用了table-layout: fixed。

【解决方案2】：

您可以在表格单元格中放置一个 div。

该 div 中的任何内容都不会延伸表格单元格。

至少在 IE8 和 Chrome 中运行良好。

【讨论】：

长词的情况下，加 word-wrap: break-word;将被要求。在固定宽度表格的情况下，单元格内部内容可能仍然比 div 上指定的 max-width 宽，但是文本会根据 div 宽度进行换行，导致空间损失。因此，恕我直言，您的解决方案仅限于非固定宽度的表格。

【解决方案3】：

旧的 html td 宽度将在 IE 8 中工作...但是您需要最大宽度，而不是宽度...除了每个单元格所需的额外 html 属性。

【讨论】：

“但是你想要最大宽度，而不是宽度”——我需要的很简单，只需让长文本自动换行到下一行，类似于记事本的自动换行功能。有什么解决办法吗？
是的，上面有人给出的解决方案就可以了。（必须检查 IE8 ，因为我猜是你的目标）显然，css3 不会适用于 IE6，当然。我的解决方案有效，但不灵活，您需要在 tds 上固定宽度，也可能在桌子上。这不好玩。他提到的断词是唯一的方法，如果你试图打破的是单词，旧的 css 属性不会破坏例如没有空格的长注册表键字符串。无论如何，旧的 css 做包装：w3schools.com/css/pr_text_white-space.asp quirksmode.org/css/whitespace.html（浏览器支持表）
我有时使用的另一种解决方案是嵌入到一个 div 或 span 中（是否使用 display:block，取决于需要什么），我对其应用任何属性...可以是诡计，在某些情况下。
关于IE6，很多人还在使用它，它是一个过时的浏览器。我个人已将 Ie6 用户从我的网站中屏蔽掉，我无法花时间为 Ie6 用户进行修复。他们更新的时间到了 :)

【解决方案4】：

<td nowrap="wrap" style="width:100px;"></td>

所有浏览器..

不幸的是，您必须处理每个单元格的内容以保持整个表格的固定宽度。有一个宽度属性，但它不控制任何东西..

【讨论】：