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> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    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> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27