Css 简明教程

CSS - hyphens

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

CSS hyphens property controls how words are broken into lines when text is too long to fit on a single line. This property can be used to improve the readability of text that wraps across multiple lines.

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

The property only applies to block-level elements.

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

Following are all possible values that can be used for property hypens:

none − No hyphenation is allowed.
manual − It specifoes manual hyphenation behavior for text in WebKit-based browsers.
auto − Hyphenation is allowed at appropriate hyphenation points, as determined by the browser.
initial − The initial value, which is manual.
inherit − The value inherited from the parent element.

CSS hyphens - none Value

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

The hyphens: none property value prevents hyphenation of words. It will not be broken into lines, even if they are too long to fit on a single line.

<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 属性时，仅在用户明确插入连字符的地方允许连字符换行。这是一个默认值。

When you use the CSS hyphens: manual property, hyphenation is only allowed at points where the user has explicitly inserted hyphens. This is a default value.

<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 属性让浏览器根据语言的连字符换行规则自动在被认为合适的地方为单词连字符换行。

You can use the CSS hyphens: auto property to let the browser automatically hyphenate words at points that are considered to be appropriate, according to the language’s hyphenation rules.

<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 ，这意味着仅在用户明确插入连字符的地方允许连字符换行。

CSS hyphens: initial property sets the hyphens property to its initial value. The initial value for the hyphens property is manual, which means that hyphenation is only allowed at points where the user has explicitly inserted hyphens.

<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 属性时，连字符属性的值从父元素继承。元素的连字符换行将与其父元素的连字符换行相同。

When you use the hyphens: inherit property, the value of the hyphens property is inherited from the parent element. The hyphenation of the element will be the same as the hyphenation of its parent element.

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