68

如果我只是穿上word-break: break-all一个元素，我经常会得到这样的结果：

大家好，我正在输入一条
太长的消息！

显然这会更好：

大家好，我输入的
信息太长，无法容纳！

但与此同时，如果有人写道：

啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊！！！！！！

然后我希望它是：

啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊！！！！！！

我似乎找不到真正做到这一点的方法。

请注意，元素的宽度不是固定的，可能会发生变化。

4

4 回答 4

54

尝试word-break: break-word;它的行为应该如你所愿。

于 2012-10-02T23:21:02.823 回答
37

对于我们的很多项目，我们通常在必要时添加：

.text-that-needs-wrapping {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

它处理不同浏览器的大多数奇怪情况。

于 2018-02-16T15:47:29.643 回答
5

更新后的答案应该是：

overflow-wrap:break-word;

它会破坏一个本身无法容纳在自己的行中的单词，但保留所有其他单词（请参阅此处的溢出包装）。

您还可以使用：

overflow-wrap:anywhere;但这将允许在任何单词后换行，以减少元素的宽度。请参阅以下 MDN 中描述的差异：

[break-word is] 与anywhere值相同，如果行中没有其他可接受的断点，则允许在任意点打破通常不可破坏的单词，但在计算时不考虑由单词break引入的软换行机会最小内容内在大小。

此外，anywhereInternet Explorer、Safari 和某些移动浏览器不支持，而break-word所有主要浏览器都支持（请参阅 [此处][2]）。

word-break: break-word;不应再使用它，因为它已被弃用，取而代之的是overflow-wrap:break-word;. 现在，该word-break属性旨在用于当您想打断单词时，无论它们是否适合自己的行（即 OP 的第一个示例word-break: break-all.

In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

(From overflow-wrap also linked above )

于 2020-09-10T18:43:53.730 回答
4

对于智能分词，或首先要正确分词，您需要与语言相关的规则。对于英语和许多其他语言，正确的断行意味着断字，断行时在行尾添加连字符。

在 CSS 中，您可以使用hyphens: auto，尽管您仍然需要使用供应商前缀来复制它。由于这在 IE 9 上不起作用，您可以考虑使用基于 JavaScript 的连字符，例如Hyphenate.js。在这两种情况下，都必须使用语言标记（lang属性）。

打断长的、不可连字符的字符串是一个不同的问题。最好在预处理中处理它们，但在简单的设置中word-break: break-word（这意味着不正确的断词，例如英语）可能被视为紧急情况。

于 2012-10-03T05:46:15.163 回答