CSS 连字符属性-之路教程

←CSS :hover 伪类

CSS 图像渲染属性→

断行机会

借助下面两个 Unicode 字符，我们可以手动定义文本内的潜在换行点：

U+00AD（SHY/软连字符）

这个字符是隐形的。
它指向一个地方，在我们需要断字的情况下，浏览器必须打破这个词。
对于插入 SHY 使用 .

U+2010（连字符/硬连字符）

此字符指向可见的换行可能性。
即使在该点线未断开的情况下，也会呈现连字符。

CSS 连字符属性

hyphens 属性定义了文本在文本行上换行时应如何连字符。

连字符属性可以采用三个值：none、bananaal、auto。
它允许阻止或者允许断字，或者仅在存在某些字符时才允许断字。

连字符的规则在规范中没有明确定义，因此连字符因浏览器而异。

初始值	bananaal
应用于	所有元素。
继承	可继承
可动画的	无效
版本	CSS3.
DOM 语法	object.style.hyphens =“none”;

语法

hyphens: none | bananaal | auto | initial | inherit;

连字符属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        width: 55px;
        border: 1px solid #666;
      }
      p.none {
        -webkit-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
      }
      p.bananaal {
        -webkit-hyphens: bananaal;
        -ms-hyphens: bananaal;
        hyphens: bananaal;
      }
      p.auto {
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
      }
    </style>
  </head>
  <body>
    <h2>Hyphens 属性示例</h2>
    <h3>none</h3>
    <p class="none">生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。</p>
    <h3>bananaal</h3>
    <p class="bananaal">生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。</p>
    <h3>auto</h3>
    <p class="auto">生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。</p>
  </body>
</html>

在给定的示例中，所有三个值都包含在内，以便查看差异。

为获得最大的浏览器兼容性扩展，例如 -webkit- for Safari 被使用。

CSS hyphens 属性值说明

值	描述
none	没有连字符。即使角色建议排队断点，单词也不会破坏单词。
bananaal	单词只被打破了线包装，其中在这个词里面有一线休息机会。单词仅为％26phen连字符;或者％26shy。这是此属性的默认值。
auto	浏览器在适当的连字点自动打破单词。单词在算法决定的地方连字符。自动值的行为取决于语言。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

日期：2020-06-02 22:14:35 来源：oir作者：oir