CSS - 連字元屬性

CSS 的hyphens 屬性控制當文字過長無法在一行顯示時，單詞如何斷行。此屬性可用於提高跨多行換行的文字的可讀性。此屬性僅適用於塊級元素。

語法

hyphens: none | manual | auto | initial | inherit;

屬性值

值	描述
none	不允許使用連字元。
manual	它指定了文字在 &hyphen 或 &shy 處的手動連字元行為。預設值。
auto	允許在瀏覽器確定的適當連字元點使用連字元。
initial	將屬性設定為其預設值。
inherit	從父元素繼承該屬性。

CSS 連字元屬性示例

以下示例說明了使用不同值的hyphens 屬性。

使用 None 值的連字元屬性

要防止單詞斷行，我們使用none 值。即使單詞過長無法在一行顯示，也不會將其斷行。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid #12782f;
         background-color: coral;
         width: 70px;
         padding: 10px;
      }

      .hyphenated-none {
         hyphens: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS hyphens property
   </h2>
   <h4>
      hypens: none
   </h4>
   <div class="container">
      <p class="hyphenated-none">
         This is a muchmuchmuch larger building.
      </p>
   </div>
</body>

</html>

連字元屬性手動值

要僅在使用 &hyphen 或 &shy 顯式插入連字元的位置允許斷行，我們使用manual 值。這是一個預設值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid #12782f;
         background-color: coral;
         width: 70px;
         padding: 10px;
      }

      .hyphenated-none {
         hyphens: manual;
      }
   </style>
</head>

<body>
   <h2>
      CSS hyphens property
   </h2>
   <h4>
      hypens: manual
   </h4>
   <div class="container">
      <p class="hyphenated-none">
         This is a muchmuchmuch larger building.
      </p>
   </div>
</body>

</html>

使用 Auto 值的連字元屬性

要讓瀏覽器根據語言的連字元規則自動在適當的位置斷行，我們使用auto 值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid #12782f;
         background-color: coral;
         width: 70px;
         padding: 10px;
      }

      .hyphenated-none {
         hyphens: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS hyphens property
   </h2>
   <h4>
      hypens: auto
   </h4>
   <div class="container">
      <p class="hyphenated-none">
         This is a muchmuchmuch larger building.
      </p>
   </div>
</body>

</html>

支援的瀏覽器

屬性
hyphens	55.0	79.0	43.0	17.0	44.0

css_properties_reference.htm

列印頁面

上一個

下一個