CSS 怎么用 hyphenate-character 实现字符连字符断行?

文章导读
上一个 测验 下一个 CSS hyphenate-character 属性允许您指定当使用 hyphens 属性对文本进行断字时,应该使用的连字符。当文本被断字时,浏览器会在单词内的适当位置插入连字符。
📋 目录
  1. 语法
  2. 属性值
  3. CSS hyphenate-character 属性的示例
  4. 使用 auto 值的 Hyphenate Character 属性
  5. 使用 String 值的 Hyphenate Character 属性
  6. 支持的浏览器
A A

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>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
hyphenate-character 106.0 106.0 98.0 17.0 92.0
css_reference.htm