CSS - 连字符属性

CSS 的 `hyphenate-character` 属性允许您指定在使用 hyphens 属性对文本进行断字时，应使用哪个字符作为断字点。当文本断字时，浏览器会在单词内的适当位置插入连字符。

语法

hyphenate-character: auto | string | initial | inherit;

属性值

值	描述
auto	浏览器根据当前排版约定选择合适的字符。默认值。
字符串	它指定在换行符之前的行尾要使用的字符。
initial	这将属性设置为其默认值。
inherit	这将从父元素继承属性。

CSS 连字符字符属性示例

以下示例解释了具有不同值的hyphenate-character属性。

使用 auto 值的连字符字符属性

为了允许浏览器使用其默认的断字字符来断字，通常是一个标准的连字符 (-) 或浏览器断字设置中定义的其他字符，我们使用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 property
   </h2>
   <h4>
      hyphenate-character: auto
   </h4>
   <div>
      CSS hyphenatecharacter auto
   </div>
</body>

</html>

使用字符串值的连字符字符属性

要使用不同的断字字符，我们将字符串中的字符指定给hyphenate-character属性。指定的字符将用作断字字符。这在下面的示例中显示。

示例

<!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 property
   </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_properties_reference.htm

打印页面