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

Question

我正在使用word-break: break-all;并想知道如何让浏览器自动插入连字符,如MDN示例中所示.

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.

Answer 2

如果浏览器支持且语言包含连字符字典，则会插入连字符。但是你的

aaaaaaaaaaaaaaaaaa

不在字典里。

因此，您必须­像在https://jsfiddle.net/LJYj3/5/ 中一样插入软连字符以满足您的需求

这里有更多的思考：https : //stackoverflow.com/a/856322/1696030

Answer 3

该-ms-hyphens物业仅适用于IE10 +.在IE9或更低版本中无法实现.

请参阅您提供的参考链接底部的浏览器兼容性图表.

它在Chrome中不起作用:WebKit连字符