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 回答