css - 样式 "word-break: break-word"怎么了？

Question

在this question以及this blog ，其中提到了样式 word-break 及其值。此外，还有值 break-word 作为属于例如的东西。 自动换行类。

在最近的 VS 中 MVC 模板中，我发现了 word-break: break-word 组合(好吧，Resharper 确实找到了它)。现在我很好奇它是否是一个有效的组合开始(我在使用 gooling 时未能找到)或者它是否是一个无效的 CSS 语法(在这种情况下我想知道为什么 MS 把它放在那里以及它背后的故事)。

Answer 1

关于这个主题还有其他问题，例如this one有很多很好的答案，但是这些信息可能会分散对基本问题的注意力，word-break 的不同值有什么作用。所以这里是对那个问题的回答，而且只是那个问题。

如果你拿这个片段

body {
  max-width: 15em;
  box-shadow: green 0 0 8px;
  word-break: normal;
}

Some short words, somewhatlongerwords and extremelylongwordsthatarereallylong for testing purposes.

使用默认值normal，单词不会被打断；使用普通自动换行，最长的单词溢出开箱。截图:

---

break-all 在行尾打断所有单词，无论它们是否完全适合下一行。

---

keep-all 适用于 CJK(中文、日文和韩文)单词，它们之间通常没有空格。
对于纯英文文本，与 normal 没有区别。

_{(如果您有兴趣，this MDN article 提供了一个日文示例，您可以从中看出区别。)}

---

break-word 将那些不适合该框的单词打散。这与 break-all 不同，后者无论如何都会中断所有单词。

现在这最后一个是非标准的，它并不适用于所有浏览器，所以如果你想要这个，你也应该在你的样式表中写 overflow-wrap: break-word; ，以及为了与旧版浏览器兼容 word-wrap: break-word;。

还有更多内容，但我会向您推荐 this question用于推理、历史等。