CSS hyphens 属性

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

实例

设置不同的连字符：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 55px;
  border: 1px solid black;
 }
div.a {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
div.b {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
div.c {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
</style>
</head>
<body>
<h1>hyphens 属性</h1>
<h2>hyphens: none</h2>
<p>单词不用连字符（不换行）。</p>
<div class="a">A veryvery&shy;very long word.</div>
<h2>hyphens: manual</h2>
<p>单词只在 &amp;hyphen; 或 &amp;shy; 处有连字符（如果需要）。</p>
<div class="b">A veryvery&shy;very long word.</div>
<h2>hyphens: auto</h2>
<p>在算法确定的位置插入单词连字符（如果需要）。</p>
<div class="c">A veryvery&shy;very long word.</div>
</body>
</html>

运行一下

定义和用法

hyphens 属性定义是否允许在一行文本中使用连字符创建更多的自动换行机会。

连字规则具有语言特定性。在 HTML 中，语言由 lang 属性决定，浏览器只会在当前属性存在且有合适的连字字典可用的情况使用连字进行连接。在 XML 中，必须使用 xml:lang 属性。

默认值：	manual
继承：	是
动画制作：	不支持。请参阅：动画相关属性。
版本：	CSS3
JavaScript 语法：	object.style.hyphens="none"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit- 或 -ms- 的数字表示使用前缀的首个版本。

属性
hyphens	55.0	79.010.0 -ms-	43.0	5.1 -webkit-	44.0

CSS 语法

hyphens: none|manual|auto|initial|inherit;

属性值

值	描述
none	单词不用连字符（不换行）。
manual	默认。单词只在 &hyphen; 或处有连字符（如果需要）。
auto	在算法确定的位置插入单词连字符（如果需要）。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

CSS hyphens 属性

实例

定义和用法

浏览器支持

CSS 语法

属性值

分类导航