Css 简明教程

CSS - hyphenate-character Property

CSS hyphenate-character 属性允许你指定在使用 hyphens 属性对文本进行连字化时用来作为连字化点使用的字符。

当对文本进行连字化时，浏览器将在单词中的适当点插入连字号字符，以增进优化对齐文本的视觉观感。 hyphenate-character 属性允许你自定义连字化使用的字符。

Possible Values

<string> − 它用作连字号断行前行的结尾处的 <string> 。
auto − 默认值。用户代理会根据内容语言的排版习惯确定一个合适的字符串。需要明确设置才能覆盖继承值。

Applies To

所有元素。

Syntax

hyphenate-character: <string> | auto;

它允许用连字号替换特定的字符串，并指示用户代理根据排版习惯选择合适的字符串（默认）。

CSS hyphenate-character - auto Value

以下示例演示了 hyphenate-character: auto 属性允许在指定元素的内容中自动连字化 −

<html>
<head>
<style>
   div {
      width: 80px;
      border: 2px solid blue;
      hyphens: auto;
      hyphenate-character: auto;
   }
</style>
</head>
<body>
   <div>CSS hyphenatecharacter auto</div>
</body>
</html>

CSS hyphenate-character - <string> Value

以下示例演示了 hyphenate-character 属性，其中不同的连字符显示连字符行为的不同效果 −

<html>
<head>
<style>
   div {
      width: 80px;
      border: 2px solid blue;
      hyphens: auto;
   }
   .box1 {
      hyphenate-character: "=";
   }
   .box2 {
      hyphenate-character: "*";
   }
   .box3 {
      hyphenate-character: "%";
   }
</style>
</head>
<body>
   <h3>hyphenate-character: "="</h3>
   <div class="box1">CSS hyphenatecharacter auto</div>
   <h3>hyphenate-character: "*"</h3>
   <div class="box2">CSS hyphenatecharacter auto</div>
   <h3>hyphenate-character: "%"</h3>
   <div class="box3">CSS hyphenatecharacter auto</div>
</body>
</html>