在许多书面语言中,都可以在音节和字词之间换行。这样做通常是为了在某一文本行中放置更多字符,目的是为了减少文本区域中的行数,从而节省空间。在此类语言中,中断用连字符(“-”)直观地表示。
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;
结合使用以上各项会得到如下结果:
请注意,软连字符不可见。在所有情况下,当包含软连字符的字词放在一行上时,连字符将不可见。现在,我们来看看连字符这三个值的行为方式。
全部不使用
在第一个示例中,连字符属性设置为 none
。这样可以防止显示软连字符。如需确认这一点,您可以调整窗口大小,使“elit”一词不适合显示在可见文本行中。
使用人工付款
在第二个示例中,连字符属性设置为 manual
,这意味着,仅当外边距与“elit”一词分开时,才会出现软连字符。同样,您可以通过调整窗口大小来确认这一点。
正在使用自动模式
在第三个示例中,连字符属性设置为 auto
。在这种情况下,由于用户代理会自动确定连字符的位置,因此不需要软连字符。如果您调整窗口大小,您将看到浏览器在与第二个示例相同的位置用连字符连接该示例,但不存在软连字符。如果您继续缩小窗口,浏览器将能够换行文本中任意两个音节之间的换行符。