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

打印页面

上一个

下一个