CSS 属性

CSS hyphenate-character 属性允许您指定使用 hyphens 属性对文本进行连字符时应用作连字符点的字符。

当文本带有连字符时，浏览器将在单词内的适当位置插入连字符，以改善对齐文本的视觉外观。 hyphenate-character 属性允许您自定义用于连字符的字符。

属性值

  • <string>: 它用作 <string>在连字符之前的行尾。

  • auto: 默认值。用户代理根据内容语言的印刷约定确定合适的字符串。需要显式设置才能覆盖继承的值。

适用范围

所有元素。

语法

hyphenate-character: <string> | auto;

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

CSS hyphenate-character: auto

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

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

CSS hyphenate-character: <string> 

以下示例演示连字符属性，不同的连字符显示连字行为的不同效果 -

<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 hyphenate­character auto</div>
   <h3>hyphenate-character: "*"</h3>
   <div class="box2">CSS hyphenate­character auto</div>
   <h3>hyphenate-character: "%"</h3>
   <div class="box3">CSS hyphenate­character auto</div>
</body>
</html>