如果我只是穿上word-break: break-all
一个元素,我经常会得到这样的结果:
大家好,我正在输入一条
太长的消息!
显然这会更好:
大家好,我输入的
信息太长,无法容纳!
但与此同时,如果有人写道:
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊!!!!!!
然后我希望它是:
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊!!!!!!
我似乎找不到真正做到这一点的方法。
请注意,元素的宽度不是固定的,可能会发生变化。
如果我只是穿上word-break: break-all
一个元素,我经常会得到这样的结果:
大家好,我正在输入一条
太长的消息!
显然这会更好:
大家好,我输入的
信息太长,无法容纳!
但与此同时,如果有人写道:
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊!!!!!!
然后我希望它是:
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
啊啊!!!!!!
我似乎找不到真正做到这一点的方法。
请注意,元素的宽度不是固定的,可能会发生变化。
尝试word-break: break-word;
它的行为应该如你所愿。
对于我们的很多项目,我们通常在必要时添加:
.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;
}
它处理不同浏览器的大多数奇怪情况。
更新后的答案应该是:
overflow-wrap:break-word;
它会破坏一个本身无法容纳在自己的行中的单词,但保留所有其他单词(请参阅此处的溢出包装)。
您还可以使用:
overflow-wrap:anywhere;
但这将允许在任何单词后换行,以减少元素的宽度。请参阅以下 MDN 中描述的差异:
[break-word is] 与anywhere值相同,如果行中没有其他可接受的断点,则允许在任意点打破通常不可破坏的单词,但在计算时不考虑由单词break引入的软换行机会最小内容内在大小。
此外,anywhere
Internet 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 )
对于智能分词,或首先要正确分词,您需要与语言相关的规则。对于英语和许多其他语言,正确的断行意味着断字,断行时在行尾添加连字符。
在 CSS 中,您可以使用hyphens: auto
,尽管您仍然需要使用供应商前缀来复制它。由于这在 IE 9 上不起作用,您可以考虑使用基于 JavaScript 的连字符,例如Hyphenate.js。在这两种情况下,都必须使用语言标记(lang
属性)。
打断长的、不可连字符的字符串是一个不同的问题。最好在预处理中处理它们,但在简单的设置中word-break: break-word
(这意味着不正确的断词,例如英语)可能被视为紧急情况。