CSS 中的更智能断词？

Question

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

大家好，我正在打字
圣人太长了，不适合！

显然这会更好：

大家好，我正在输入
消息太长，无法容纳！

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

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

然后我希望它是：

BLAAAAAAAAARRRRRRRRRRRR
嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎！！！！！！

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

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

Answer 1

尝试word-break: break-word; 它应该按照您的预期运行。

Answer 2

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

.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;
}

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

Answer 3

更新后的答案应该是：

overflow-wrap:break-word;

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

您还可以使用：

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

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

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

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

与 word-break 相比，overflow-wrap 只会在整个单词不能放在它自己的行上而不溢出的情况下才会创建一个 break。

（来自 上面也链接的溢出包装）

Answer 4

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

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

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

Answer 5

这就是你要找的：

.break-word {
-ms-word-break: break-all;
-ms-word-wrap: break-all;
-webkit-word-break: break-word;
-webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

Answer 6

overflow-wrap: anywhere; 是你需要的。