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

列印頁面