如何使用CSS实现文本换行？

Question

如何使用CSS实现文本换行？

107

<td>gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td>

如何在CSS中使文本换行？

- keruilin

1

不是CSS，所以不是答案，但可以使用文本字段来保存它...只是说一下。 - Mark Schultheiss

10

恶心。输入框是用来展示输入的。我以为我们已经不需要为了呈现效果而撒谎掩盖语义问题了。 - Quentin

5个回答

107

试一下这个。适用于IE8、FF3.6和Chrome。

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

- Gaurav Saxena

8

这对我没有起作用，但是下面@Stirling的回答确实起了作用。 - Zarepheth

1

我亲自测试过，它运行得非常好！我认为这里唯一的“问题”就是你必须手动设置容器的大小（在这个例子中是100像素）。 - ymz

这也可以工作：.truncate { 宽度：250像素; white-space: nowrap; 溢出：隐藏; text-overflow: ellipsis; } - Jacques Koekemoer

该死的表格，总是解决问题！ - 3xCh1_23

1

使用“word-break: break-all;”来避免提及“width”。 - Web_Developer

1

这将在任何地方都有效。

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

- Atul.Bajare

1

使用text-wrap，浏览器支持相对较弱（从起草规范中可以预料到）。

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

- Quentin

13

为了避免一些显示错误，请不要输入过长的单词。是的，那是我的回答。 - SandRock

2

@SandRock — 不，不是这样的。这个回答被错误地描述了一半。虽然问题中的数据是“一长串非空格字符”，但并不是一个“单词”。“采取措施”也不意味着“不输入”，我们不知道数据来自哪里，它可能意味着测试用户输入的合理性，并显示不适当内容的错误消息。 - Quentin

0

如果您无法控制用户输入，更好的选择是建立css属性overflow:hidden，这样如果字符串超过宽度，它将不会破坏设计。

编辑：

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

- netadictos

2

如果您要使用此选项，请确保为包含文本的元素设置宽度，否则“overflow:hidden”将仅隐藏溢出内容，而不是换行。 - jay

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stirling · Accepted Answer

如果输入 "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG"，那么会产生以下结果：

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

我从谷歌搜索的几个网站上获取了这个示例。我已在Firefox 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>