使用 CSS 管理连字符

Joe Medley
Joe Medley

在许多书面语言中,都可以在音节和字词之间换行。这样做通常是为了在某一文本行中放置更多字符,目的是为了减少文本区域中的行数,从而节省空间。在此类语言中,中断用连字符(“-”)直观地表示。

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

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

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

-webkit-hyphens: manual;
hyphens: manual;

结合使用以上各项会得到如下结果:

单行屏幕截图

请注意,软连字符不可见。在所有情况下,当包含软连字符的字词放在一行上时,连字符将不可见。现在,我们来看看连字符这三个值的行为方式。

全部不使用

在第一个示例中,连字符属性设置为 none。这样可以防止显示软连字符。如需确认这一点,您可以调整窗口大小,使“elit”一词不适合显示在可见文本行中。

Google ipsum dolor sit amet, consectetur adipiscing elit.

使用人工付款

在第二个示例中,连字符属性设置为 manual,这意味着,仅当外边距与“elit”一词分开时,才会出现软连字符。同样,您可以通过调整窗口大小来确认这一点。

Google ipsum dolor sit amet, consectetur adipiscing elit.

正在使用自动模式

在第三个示例中,连字符属性设置为 auto。在这种情况下,由于用户代理会自动确定连字符的位置,因此不需要软连字符。如果您调整窗口大小,您将看到浏览器在与第二个示例相同的位置用连字符连接该示例,但不存在软连字符。如果您继续缩小窗口,浏览器将能够换行文本中任意两个音节之间的换行符。

Google ipsum dolor sit amet, consectetur adipiscing elit.