如何使用 CSS 换行？ [复制]答案

【问题标题】：How to wrap text using CSS? [duplicate]如何使用 CSS 换行？ [复制]
【发布时间】：2010-10-16 16:37:22
【问题描述】：

<td>gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td>

如何让这样的文本在 CSS 中换行？

【问题讨论】：

不是 CSS 所以不是答案，而是使用文本字段来保存它......只是说
呃。输入用于显示输入。我认为我们已经设法超越了出于演示目的而在语义上撒谎。

标签： css word-wrap

【解决方案1】：

如果你输入“AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG” 这将产生：

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

我从谷歌上几个不同的网站上拿了我的例子。我已经在 ff 5.0、IE 8.0 和 Chrome 10 上对此进行了测试。它适用于所有这些。

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* css-3 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
    word-break: break-all;
    white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword"></td>
    </tr>
</table>

【讨论】：

我添加了“word-wrap: break-word;”但在 Firefox 和 IE 中都不起作用（我只在这两个中测试过）......当我添加了你建议的所有选项时......它起作用了......谢谢！！！
我必须添加“空白：-webkit-pre-wrap;”让新版本的 Chrome（可能还有 Safari）工作。
谢谢，成功了！ bootstrap 自己做一件事，没有任何帮助。终于找到适合我的解决方案了。
非常感谢，你太棒了！
word-break: break-all; 工作

【解决方案2】：

尝试这样做。适用于 IE8、FF3.6、Chrome

<body>
  <table>
    <tr>
      <td>
        <div style="word-wrap: break-word; width: 100px">gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div>
      </td>
    </tr>
  </table>
</body>

【讨论】：

这对我不起作用，但下面@Stirling 的回答确实有效。
我自己测试过，效果很好！我假设这里唯一的“问题”是您必须手动设置容器的大小（在本例中为 100px）
这也有效： .truncate { width: 250px;空白：nowrap；溢出：隐藏；文本溢出：省略号； }
疯狂的桌子，总是解决问题！
使用 "word-break: break-all;"避免提及“宽度”。

【解决方案3】：

使用text-wrap，浏览器支持相对较弱（正如您可能从规范草案中所期望的那样）。

您最好采取措施确保数据没有长长的非空白字符串。

【讨论】：

"为避免显示错误，请不要输入长字。"这真的是你的答案吗？
@SandRock — 不，不是。这是对这个答案的一半的错误描述。问题中的数据虽然是“非空白的长字符串”，但不是“单词”。 “采取措施”也不意味着“不输入”，我们不知道数据来自哪里，这可能意味着测试用户输入的完整性并针对不适当的内容显示错误消息。

【解决方案4】：

这将适用于任何地方。

<body>
  <table style="table-layout:fixed;">
  <tr>
    <td><div style="word-wrap: break-word; width: 100px" > gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div></td>
  </tr>
  </table>
 </body>

【讨论】：

【解决方案5】：

如果不能控制用户输入，更好的选择是建立css属性，overflow:hidden，这样如果字符串优于宽度，就不会变形设计。

已编辑：

我喜欢这个答案：“word-wrap: break-word”，对于那些不支持它的浏览器，例如 IE6 或 IE7，我会使用我的解决方案。

【讨论】：

如果您要使用此选项，请确保为包含文本或溢出的元素设置宽度：hidden 只会隐藏溢出，而不是包裹它。