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

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在使用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

这需要在IE9 / IE10中工作，但是如果它也可以在Firefox和Chrome中工作，那就太好了。

回答：

该-ms-hyphens属性仅在IE10 +中有效。在IE9或更低版本中是不可能的。

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

它不适用于Chrome：WebKit连字

以上是 如何在`word-break：break-all`中使用自动CSS连字符？ 的全部内容， 来源链接： utcz.com/qa/406313.html

回到顶部