CSS中更智能的单词换行？

Question

如果我只是在一个元素上加入 word-break: break-all，通常会出现这种情况：

你好啊，我正在输入一条太长了塞不下的消
息！

显然，更好的方式是：

你好啊，我正在输入一条
太长了塞不下的消息！

但同时如果有人写了这样的话：

BLAAAAAAAAARRRRRRRRRRRRGGGGGGGGHHHHHHHH!!!!!!

那么输出应该是这样的：

BLAAAAAAAAARRRRRRRRRRR
RGGGGGGGGHHHHHHHH!!!!!!

我似乎找不到实现这个效果的方法。

请注意，元素的宽度不固定，可能会改变。

- Niet the Dark Absol

---

尝试使用word-break: normal; word-wrap: break-word吗？（我只在非常基础的水平上使用CSS，也不知道它是如何处理的，但这似乎可能有效。） - user166390

Answer 1

尝试使用word-break: break-word;，它应该会按照你的预期进行处理。

- PJ McCormick

---

word-break: break-word 在 Webkit 中是非标准的，与 op 的问题相同。这个 答案解决了相应的问题。 - Drust

word-wrap: break-word 对我没用，没有起到作用。我在表格单元格中有文本，表格包含在一个最大宽度为1000px的div中。已在Chrome和Firefox上测试。 - KevinVictor

2015年12月的修改可能不合适，它完全改变了答案。旧的答案word-break: break-word;虽然不是标准用法，但在我的Chrome浏览器中确实有效。新的答案（编辑后）word-wrap: break-word;根本无效。我认为直接这样编辑答案可能会让读者感到困惑。 - Walty Yeung

对我来说，word-wrap: break-word; 在我指定一个宽度时有效，无论单位是什么。所以，通过指定 width: 100% 我可以让它工作。然而，我不会点赞这个答案，因为修改完全改变了答案（它不是一个打字错误，而是另一个 CSS 属性），而且它甚至不是原始作者编写的。 - actaram

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

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

- Dominic White

---

快速演示连字符、单词和换行的使用。 http://plnkr.co/plunk/uKaAc0FddZfs7pxl - Richard Collette

@RichardCollette 我认为你的例子没有显示连字符。 - Terry Windwalker

Answer 3

更新后的答案应该是：

overflow-wrap:break-word;

它会将一个单词强制换行，以便它能够适应一行，但会保留其他所有单词（请参阅 overflow-wrap 这里）。

你也可以使用：

overflow-wrap:anywhere; 但这会允许在任何单词之后换行，以缩小元素的宽度。从 MDN 描述的下面的差异中可以看出：

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

此外，Internet Explore、Safari 和一些移动浏览器不支持 anywhere，而 break-word 在所有主要浏览器上都得到了支持（请参见 [here][2]）。

word-break: break-word;不应再使用，因为它已经被overflow-wrap:break-word;取代。现在，word-break属性旨在用于想要无论单词是否能放在自己的一行上都要断开单词的情况（即使用word-break: break-all的OP第一个例子）。

与word-break相反，只有在整个单词无法在自己的一行上放置而溢出时，overflow-wrap才会创建一个换行符。

(来自overflow-wrap 也链接在上面)

- Nikhil Bhatia

Answer 4

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

- gztomas

---

几年前，@Nikhil Bhatia在他们的回答中提出了这个建议，但也强调了这种方法的一些局限性。他们的担忧现在是否不再有效？编辑您的答案以承认这些批评，并解释为什么您认为这仍然是最佳选择将会很有用。 - Jeremy Caney

Answer 5

为了实现智能断词，或者说一开始就正确断词，你需要依赖于语言相关规则。对于英语和许多其他语言来说，正确的断词意味着使用连字符，在单词换行时在行末添加一个连字符。

在 CSS 中，你可以使用 hyphens: auto，但是你仍然需要使用供应商前缀进行复制。由于这在 IE 9 上不起作用，因此你可能需要考虑使用像 Hyphenate.js 这样基于 JavaScript 的断词方法。在这两种情况下，使用语言标记（lang 属性）非常重要。

断开长的、无法用连字符分隔的字符串是一个不同的问题。它们最好在预处理中处理，但在简单的情况下，可以考虑使用 word-break: break-word（例如在英语中错误地分割单词）作为紧急方法。

- Jukka K. Korpela

---

Chrome不像Firefox那样支持它 https://caniuse.com/#search=hyphens.. 只是部分支持。 - VP.

Answer 6

这就是你要找的东西：

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

- Elazar Zadiki