在 CSS 中更聪明的断字？

尝试 word-break: break-word;它应该表现为你所期望的。

对于智能断字，或者首先对于 正确断字，您需要依赖于语言的规则。对于英语和许多其他语言来说，正确的中断意味着连字符，当中断发生时，在一行的末尾添加一个连字符。

在 CSS 中，您可以使用 hyphens: auto，尽管大多数情况下仍然需要使用供应商前缀复制它。由于这在 IE9上不起作用，您可以考虑基于 JavaScript 的连字符，比如 连字符。在这两种情况下，都必须使用语言标记(lang属性)。

断开长而不能断字的字符串是另一个问题。它们最好在预处理中处理，但在简单的设置中，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;

它会打破一个单词本身不能适合自己的行，但留下所有其他单词，因为他们(见溢出包装 给你)。

你也可以使用:

但是这将允许在任何单词之后断行，以减少元素的宽度。请参阅下面描述的与 MDN 的区别:

[ break-word is ]与 where 值相同，如果在行中没有其他可接受的断点，通常不可断的单词可以在任意点被断开，但是在计算最小内容内在大小时，单词 break 引入的软包装机会不被考虑。

此外，Internet Explorer、 Safari 和一些移动浏览器不支持 anywhere，而所有主流浏览器都支持 break-word(参见[ here ][2])。

不应该再使用 word-break: break-word;，因为它已被弃用，而倾向于使用 overflow-wrap:break-word;。现在，word-break属性用于当您想要中断单词时，而不管它们是否可以放在自己的行上(例如，OP 的第一个 word-break: break-all示例)。

与单词断行不同，溢出包装只有在整个单词不能放在自己的行上而不溢出的情况下才会产生断行。

(来自溢出包装 以上亦有连结)

这就是你要找的:

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

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