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等工具进行简单的客户端连字。

Answer 2

-ms-hyphens属性仅适用于IE10 +。在IE9或更低版本中无法实现。

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

它在Chrome中无效：WebKit Hyphenation

Answer 3

如果浏览器支持＆amp ;;则会插入连字符。语言包括连字词典。但是你的

aaaaaaaaaaaaaaaaaa

不在字典中。

因此，您必须使用https://jsfiddle.net/LJYj3/5/

中的软连字符

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

Answer 4

我找不到任何 css 解决方案，所以用 js 修复它。

const addWordBreaks = (str, maxLength = 10) => {
    const words = str.split(" ");
    const newWords = [];
    words.forEach(function(word) {
      if (word.length > maxLength) {
        const firstWord = word.substr(0,maxLength);
        const endWord = word.substr(maxLength, word.length-1);
        newWords.push(firstWord +"- \n");
        newWords.push(endWord)
      } else {
        newWords.push(word)
      }
    });
     return newWords.join(" ");
  }

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

4 个答案: