CSS-连字符

CSS 连字符

CSS 连字符属性控制当文本太长而无法容纳在单行中时如何将单词分成行。此属性可用于提高跨多行文本的可读性。

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

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

none -不允许使用连字符。
手册 -它指定基于 WebKit 的浏览器中文本的手动连字符Behave。
auto -允许在适当的连字点处连字，由浏览器确定。
初始值 -初始值，是手动的。
继承 -从父元素继承的值。

CSS Hypens - 无

连字符：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 Hypens - 手册

当您使用 CSS hyphens: 手动属性时，仅允许在用户明确插入连字符的位置使用连字符。这是默认值。

例子

这是一个例子 -

<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 Hypens - 汽车

您可以使用 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 Hypens - 初始

CSS连字符：初始属性将连字符属性设置为其初始值。hyphens 属性的初始值为manual，这意味着仅在用户明确插入连字符的位置才允许使用连字符。

例子

这是一个例子 -

<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 Hypens - 继承

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

例子

这是一个例子 -

<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>