Css 简明教程

CSS - hyphens

CSS hyphens 属性控制在文本当一行放不完，需要换行时单词是如何换行的。此属性可用于提高跨多行显示文本的可读性。

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

以下是 hypens 属性可用的所有可能取值：

  1. none − 不允许连字号。

  2. manual − 它指定了基于 WebKit 的浏览器中文本的手动连字符换行行为。

  3. auto − 在浏览器确定的适当连字符换行点允许连字符换行。

  4. initial − 初始值，即手动。

  5. inherit − 从父元素继承的值。

CSS hyphens - none Value

hyphens: none 属性值可以防止单词换行。即使它们太长以至于无法放在单行中，也不会将其拆分为多行。

<html>
<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 hyphens - manual Value

当你使用 CSS hyphens: manual 属性时，仅在用户明确插入连字符的地方允许连字符换行。这是一个默认值。

<html>
<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 hyphens - auto Value

你可以使用 CSS hyphens: auto 属性让浏览器根据语言的连字符换行规则自动在被认为合适的地方为单词连字符换行。

<html>
<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 hyphens - initial Value

CSS hyphens: initial 属性将连字符属性设置为其初始值。 hyphens 属性的初始值为 manual ，这意味着仅在用户明确插入连字符的地方允许连字符换行。

<html>
<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 hyphens - inherit Value

当你使用 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>