CSS - hyphenate-character 属性
CSS hyphenate-character 属性允许您指定当使用 hyphens 属性对文本进行断字时,应该使用的连字符。当文本被断字时,浏览器会在单词内的适当位置插入连字符。
语法
hyphenate-character: auto | string | initial | inherit;
属性值
| 值 | 描述 |
|---|---|
| auto | 浏览器根据当前的排版惯例选择合适的字符。默认值。 |
| string | 指定在行尾断字断裂前使用的字符。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承该属性。 |
CSS hyphenate-character 属性的示例
以下示例用不同的值解释了 hyphenate-character 属性。
使用 auto 值的 Hyphenate Character 属性
为了让浏览器使用其默认的断字连字符(通常是标准连字符 (-) 或浏览器断字设置中定义的其他字符)来断开单词,我们使用 auto 值。下例展示了这一点。
示例
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 80px;
border: 2px solid blue;
hyphens: auto;
hyphenate-character: auto;
}
</style>
</head>
<body>
<h2>
CSS hyphenate-character 属性
</h2>
<h4>
hyphenate-character: auto
</h4>
<div>
CSS hyphenatecharacter auto
</div>
</body>
</html>
使用 String 值的 Hyphenate Character 属性
要使用不同的字符进行断字,我们将字符指定为 hyphenate-character 属性的 string 值。指定的字符将在断开单词时用作断字字符。下例展示了这一点。
示例
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 80px;
border: 2px solid blue;
hyphens: auto;
}
.box1 {
hyphenate-character: "=";
}
.box2 {
hyphenate-character: "*";
}
.box3 {
hyphenate-character: "%";
}
</style>
</head>
<body>
<h2>
CSS hyphenate-character 属性
</h2>
<h4>hyphenate-character: "="</h4>
<div class="box1">
CSS hyphenatecharacter "="
</div>
<h4>hyphenate-character: "*"</h4>
<div class="box2">
CSS hyphenatecharacter "*"
</div>
<h4>hyphenate-character: "%"</h4>
<div class="box3">
CSS hyphenatecharacter "%"
</div>
</body>
</html>
支持的浏览器
| 属性 | ![]() |
![]() |
![]() |
![]() |
![]() |
|---|---|---|---|---|---|
| hyphenate-character | 106.0 | 106.0 | 98.0 | 17.0 | 92.0 |
css_reference.htm




