css学习之 : hyphens属性

CSS 属性 hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符,也可以控制浏览器什么时候使用,或者让浏览器决定什么时候使用。

连字规则具有语言特定性。在 HTML 中,语言由 lang 属性决定,浏览器只会在当前属性存在且有合适的连字字典可用的情况使用连字进行连接。 在 XML 中,必须使用 xml:lang 属性。注意::在规范中,没有明确定义连字符的实现规则,所以具体的连字符在不同浏览器中可能有所区别。

初始值manual
适用元素all elements
是否是继承属性yes
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序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 extreme­ly long English word</p>
  </li>  
  <li><code>manual</code>: hyphen only at ‐ or ­ (if needed)
    <p lang="en" class="manual">An extreme­ly long English word</p>
  </li>
  <li><code>auto</code>: hyphen where the algo is deciding (if needed)
    <p lang="en" class="auto">An extreme­ly 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;
}

留下评论