CSS 连字符

CSS连字符

CSS连字符属性控制当文本过长而无法在一行中显示时，单词如何被分割成多行。该属性可用于改善跨多行换行的文本的可读性。

该属性仅适用于块级元素。

以下是属性连字符的所有可能值：

none − 不允许连字符。
manual − 在WebKit浏览器中，指定文本的手动连字符行为。
auto − 根据浏览器确定的适当连字符点允许连字符。
initial − 默认值，即manual。
inherit − 继承父元素的值。

CSS连字符- none

hyphens: none 属性值禁止单词的连字符。即使单词过长不能在一行上显示完整，它也不会被分割成多行。

示例

以下是一个示例 −

<html lang="en">
<head>
<style>
   .container {
      border: 2px solid #12782f;
      background-color: #2fe262;
      width: 60px;
   }
   .hyphenated-none {
      hyphens: none;
   }
</style>
</head>
<body>
   <div class="container">
      <p class="hyphenated-none">It is a long established Contrary to popularised.</p>
   </div >
</body>
</html>

CSS连字符-manual

当使用CSS的 hyphens：manual 属性时，只允许在用户明确插入连字符的地方进行连字符。这是默认值。

示例

这是一个例子−

<html lang="en">
<head>
<style>
   .container {
      border: 2px solid #12782f;
      background-color: #2fe262;
      width: 60px;
   }
   .hyphenated-manual {
      hyphens: manual;
   }
</style>
</head>
<body>
   <div class="container">
      <p class="hyphenated-manual">It is a long establ-ished Contrary to popula-rised.</p>
   </div >
</body>
</html>

CSS连字符 – auto

您可以使用CSS属性 hyphens：auto 来让浏览器根据语言的连字符规则自动在适当的位置对单词进行连字符处理。

示例

以下是一个示例 –

<html lang="en">
<head>
<style>
   .container {
      border: 2px solid #12782f;
      background-color: #2fe262;
      width: 60px;
   }
   .hyphenated-auto {
      hyphens: auto;
   }
</style>
</head>
<body>
   <div class="container">
      <p class="hyphenated-auto">It is a long established Contrary to popularised.</p>
   </div>
</body>
</html>

CSS连字符 – initial

CSS 连字符: 初始值 属性将连字符属性设置为初始值。连字符属性的初始值为手动，这意味着只有在用户明确插入连字符的地方才允许连字符化。

示例

这是一个示例 –

<html lang="en">
<head>
<style>
   .container {
      border: 2px solid #12782f;
      background-color: #2fe262;
      width: 60px;
   }
   .hyphenated-initial {
      hyphens: initial;
   }
</style>
</head>
<body>
   <div class="container">
      <p class="hyphenated-initial">It is a long establ-ished Contrary to popu-larised.</p>
   </div >
</body>
</html>

CSS连字符 – inherit

当您使用 hyphens: inherit 属性时，连字符属性的值将从父元素继承。元素的连字符化将与其父元素的连字符化相同。

示例

这是一个示例：

<html lang="en">
<head>
<style>
   .container {
      border: 2px solid #12782f;
      background-color: #2fe262;
      width: 60px;
      padding: 2px;
      hyphens: auto;
   }
   .hyphenated-inherit {
      border: 2px solid #ac3f08;
      background-color: #f05e40;
      hyphens: inherit;
   }
</style>
</head>
<body>
   <div class="container">
      There are many variations of embarrassing of Lorem Ipsum.
      <p class="hyphenated-inherit">It is a long establ-ished Contrary to popu-larised.</p>
   </div >
</body>
</html>