“断字：断字”样式是怎么回事？

Question

在this question和this blog中，提到了 word-break 样式及其值。另外，还有 break-word 值，例如自动换行类。

在VS中最近的MVC模板中，我发现了 word-break：break-word 组合（嗯，Resharper确实找到了它）。现在我很好奇，它是否是一个有效的组合开头（我在使用gooling时找不到）或它是无效的CSS语法（在这种情况下，我想知道为什么MS会将其放在那里，其背后的故事是什么）。 / p>

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;，并与旧版浏览器{{1 }}。

还有更多内容，但是我会推荐您参考this question以获得推理，历史等信息。

Answer 2

分词符-如果单词超出宽度，则将其分解到下一行。 您可以在浏览器中或不在以下站点中查看CSS的工作原理。

caniuse.com