如何使用自动css连字符与单词:break-all?

前端之家收集整理的这篇文章主要介绍了如何使用自动css连字符与单词:break-all?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用单词:break-all;并想知道如何让浏览器自动插入连字符,如MDN示例所示:

文件https://developer.mozilla.org/en-US/docs/CSS/hyphens
例如:https://developer.mozilla.org/samples/cssref/hyphens.html

HTML:

<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

CSS:

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

这样文本就像这样:

aaaaa-
aaaaa-
aaaaa-

这是一个小提琴:
http://jsfiddle.net/LJYj3/2/

这需要在IE9 / IE10中工作 – 但是Firefox / Chrome也很好.

解决方法

-ms连字符属性仅适用于IE10.不可能在IE9或以下.

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

它在Chrome中不起作用:WebKit Hyphenation

原文链接:https://www.f2er.com/css/216464.html

猜你在找的CSS相关文章