css - 如何在 `word-break: break-all` 中使用自动 CSS 连字符？

Question

我正在使用 word-break: break-all; 并想知道如何让浏览器自动插入 hyphens ，如 MDN example 中所示.

div {
  width: 80px;
  height: 80px;
  display: block;
  overflow: hidden;
  border: 1px solid red;
  word-break: break-all;
  hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
}

<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

这样文本看起来像这样:

aaaaaaaa-
aaaaaaaa-
aaaaaaaa-
aaaaaaaa

我创建了一个 JSFiddle也是。

这需要在 IE9/IE10 中工作，但如果它也能在 Firefox 和 Chrome 中工作就更好了。

Answer 1

word-break属性和连字符是两个完全不同的东西。第一个，最初主要针对东亚语言，对英语等语言做了坏事:它在某些地方任意删减单词，而不表示单词已被破坏。

因此，您应该决定您是否有一个表达式，在该表达式中浏览器可以在任何位置插入换行符，或者您是否需要断字。

对于断字，这样的 CSS 代码是可以的，尽管很多人会建议将标准属性设置为 hyphens: auto最后，在前缀属性之后。但它要求在 HTML 标记中声明文本的语言，例如使用<div lang=en> .此外，浏览器支持仍然有限:IE 9 不支持这种连字符，而 IE 10 中的支持涵盖了相对较少的语言集(当然包括英语)。

对于 IE 9 上的自动断字，您需要使用服务器端编程断字或更简单的客户端断字工具，如 Hyphenator.js .