CSS 属性 hyphens
告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符,也可以控制浏览器什么时候使用,或者让浏览器决定什么时候使用。
连字规则具有语言特定性。在 HTML 中,语言由 lang 属性决定,浏览器只会在当前属性存在且有合适的连字字典可用的情况使用连字进行连接。 在 XML 中,必须使用 xml:lang
属性。注意::在规范中,没有明确定义连字符的实现规则,所以具体的连字符在不同浏览器中可能有所区别。
初始值 | manual |
---|---|
适用元素 | all elements |
是否是继承属性 | yes |
适用媒体 | visual |
计算值 | as specified |
Animation type | discrete |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
hyphens: none;
hyphens: manual;
hyphens: auto;
/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: unset;
示例
以下代码段展示了hyphens
属性取none/manual/auto这三类值的效果。
<ul>
<li><code>none</code>: no hyphen; overflow if needed
<p lang="en" class="none">An extremely long English word</p>
</li>
<li><code>manual</code>: hyphen only at ‐ or (if needed)
<p lang="en" class="manual">An extremely long English word</p>
</li>
<li><code>auto</code>: hyphen where the algo is deciding (if needed)
<p lang="en" class="auto">An extremely long English word</p>
</li>
</ul>
p {
width: 55px;
border: 1px solid black;
}
p.none {
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
p.manual {
-webkit-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}
p.auto {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}