断词 CSS 简介

在日常的前端开发中，我们经常会遇到需要将一些长文本进行断词的情况。在 CSS 中，我们可以利用断词（hyphenation）实现这个功能。

首先，我们需要明确什么是断词。断词指的是在一行文本中，将较长的单词分割为多个部分，以便使单词在行末仍然保持对齐。在不使用断词的情况下，如果一行末尾无法容纳整个单词，会将整个单词移到下一行，导致段落间距变得不美观。

接下来，我们来看看如何在 CSS 中使用断词。在 CSS3 中，我们可以使用 hyphens 属性来控制断词。该属性有三个值可选：none、auto 和 manual。

• none 表示不允许断词。
• auto 表示开启自动断词功能。
• manual 表示手动添加断词标识。

举个例子，如下代码将自动开启断词功能：

p {
  hyphens: auto;
}

如果我们想要手动添加断词标识，可以使用 hyphenate-character 属性。该属性用于指定断词标识符，默认情况下是 -。以下是一个示例：

p {
  hyphens: manual;
  hyphenate-character: "^";
}

上述示例会在每个单词的断词处添加一个 ^ 符号。当然，我们也可以使用其他符号来代替。

总结一下，在 CSS 中使用断词可以使我们的页面更美观，特别是在一些长文本排版场景下。我们可以通过 hyphens 属性开启自动断词功能，也可以通过 hyphenate-character 属性手动添加断词标识符。

以上是对断词 CSS 的介绍，希望对你有所帮助！