CSS3干货24：hyphens 连字符实现英文断词换行
hyphens 属性指定当文字跨越多行时如何自动换行断字，主要用于西方文字。断开的单词增加连字符，并且换行。hyphens 属性可以完全禁止连字符，在文本中手动指定点来使用连字符，或者让浏览器在适当的地方自动插入连字符。hyphens：manual; / *手工设定。默认值，只有单词中有建议换行符才会换行，即手工在单词中插入 ­ * /hyphens：none; / *无。即使单词
hyphens 属性指定当文字跨越多行时如何自动换行断字，主要用于西方文字。
断开的单词增加连字符，并且换行。
hyphens 属性可以完全禁止连字符，在文本中手动指定点来使用连字符，或者让浏览器在适当的地方自动插入连字符。
hyphens：manual; / *手工设定。默认值，只有单词中有建议换行符才会换行，即手工在单词中插入 ­ * /
hyphens：none; / *无。即使单词中有换行符，也不会换行，只会在空白处换行* /
hyphens：auto; / *自动。浏览器在适当的位置自动插入连字符换行* /连字规则是依语言而定的。在HTML中，语言是由 <html></html> 的 lang 属性决定的，只有当这个lang 属性存在时且有合适的连字符字典可用时，浏览器才会使用连字符。
比如：
<div class="box">
The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses to use. Su­ggested line break opportunities, as covered in Sugg­esting line break opportunities, should be preferred over automatically selecting break points whenever possible.
</div>body{
font-family: Arial, Verdana, "Microsoft Yahei", ".PingFang SC", "Simsun";
}
.box{
width: 300px;
margin-left: auto;
margin-right: auto;
font-size: 14px;
line-height: 2;
background: #eee;
}
注意：在 Suggested 和 Suggesting 中间手工插入了连接符 ­ 。
默认情况下，也即 hyphens 属性值为 manual 时，只在手工断行处换行断字。
.box{
...
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens:auto;
}
hyphens 属性值为 auto 时，浏览器会在恰当的时候对单词断行。包括，手工插入连字符的部分。但是，如果手工插入连字符的地方不符合断行条件，是不会断行的。
.box{
...
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens:none;
}
hyphens 属性值为 none 时，不换行断字，即使有手工连接符的地方。
hyphens 属性兼容性情况（图片来自 caniuse.com）：
支持的最好的是 firefox。目前 chrome 的版本是 86，还支持的不够好，不过从 v88 开始，chrome 就会完全支持它了。也就是几个月后的事情。
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
4
0- 0
已为社区贡献6条内容
所有评论(0)