使用 CSS 管理连字符

Joe Medley

在许多书面语言中，不仅可以按音节换行，还可以按字词换行。通常，这样做是为了在一行文本中放置更多字符，以便在文本区域中减少行数，从而节省空间。在这些语言中，换行以连字符 (-) 进行视觉表示。

CSS 文本模块级别 3 定义了英文连字符属性，用于控制何时向用户显示英文连字符以及显示时它们的行为方式。从 55 版开始，Chrome 会实现连字符属性。根据规范，连字符属性有三个值：none、manual 和 auto。为了说明这一点，我们需要使用软连字符 (­)，如以下示例所示。

Google ipsum dolor sit amet, consectetur adipiscing e­lit.

软连字符只有在出现在尾端边距时才会显示。此连字符在 Chrome 55 或更高版本中的呈现方式取决于 CSS hypens 属性的值。

-webkit-hyphens: manual;
hyphens: manual;

将它们组合起来，您将得到如下结果：

请注意，软连字符不可见。在所有情况下，如果包含软连字符的字词可在一行内显示，则连字符将不可见。现在，我们来看看这三个英文连字符值的行为方式。

不使用

在第一个示例中，hyphens 属性设置为 none。这样可以防止系统显示软连字符。您可以通过调整窗口大小来确认这一点，使“elit”一词无法在可见的文本行中显示。

使用手动

在第二个示例中，hyphens 属性设置为 manual，这意味着只有在边距破坏了“elit”这个字词时，才会显示软连字符。同样，您可以通过调整窗口大小来确认这一点。

使用自动

在第三个示例中，连字符属性设置为 auto。在这种情况下，无需使用软连字符，因为用户代理会自动确定连字符的位置。如果您调整窗口大小，就会发现浏览器会在此示例中与第二个示例中相同的位置添加连字符，但不会显示软连字符。如果您继续缩小窗口，就会发现浏览器可以在文本中的任意两个音节之间换行。