CSS line-break属性与中文标点换行

这篇文章发布于 2021年02月18日,星期四,13:11,归类于 CSS相关。 阅读 6029 次, 今日 8 次 5 条评论

 

line-break封面图

一、中文标点与换行

中文中,有些标点是避首标点,也就是不能出现在一行的开头,例如句号,有些标点是避尾标点,例如上引号,上书名号等。

因此,我们经常会看到如下所示的排版,就是明明后面空间足够放一个文字,但是这个文字却跑到了下一行。

如下图所示:

避首标点导致文字换行

原因就在于如果“话”在上一行显示,那么句号就会显示在下一行的开头,而句号是避首标点,必能出现在开头。因此,“话”字就被带到下一行显示了。

中文标点的这种换行特性,即使设置word-break:break-all也是无效的,此时需要用到的CSS属性是line-break

二、line-break属性简介

line-break属性主要用在CJK语言中,也就是中日韩3种语言中,其中以中文和日文为主。

语法如下:

line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

其中:

auto
使用默认的换行规则。
loose
使用限制性最小的换行规则分隔文本。通常用于短行,如在报纸上。
normal
使用最常见的换行规则。
strict
使用最严格的换行规则。
anywhere
任意位置都可以作为换行点,包括任意的标点。

以下是和中文有关的几个规则:

  • 在中文和日文语境中,类似〜 U+301C, ゠ U+30A0这样的有连字符性质的字符前面的作为换行点,只要在属性值是normal和loose时候才有用,其他值(主要指strict)是禁止的。

    例如下图所示的效果,strict模式下,字符〜的前方必须有文字,不能作为换行点。

    换行点

    但是,相对的,strict模式下,字符〜的后方可以作为换行点,而normalloose不行,如下图所示:

    结尾换行

  • 在中文和日文语境中,如果是下面这些标点:

    ・ U+30FB, : U+FF1A, ; U+FF1B, ・ U+FF65, ‼ U+203C, ⁇ U+2047, ⁈ U+2048, ⁉ U+2049, ! U+FF01, ? U+FF1F

    则属性值是loose的时候,上面这些标签的前方可以作为换行点,其他属性值(除非anywhere)都禁止。

    例如下图所示的对比效果:

    问号前面作为换行点

以上规则对应的效果均可以实地体验,您可以狠狠地点击这里:line-break与中文排版换行体验demo

操作上方的滑杆,就可以看到不同尺寸下,各类中文标点在不同的line-break属性值下的换行表现了。

滑杆截图示意

兼容性

line-break虽然平常用的少,不太常见,但实际上是一个相对比较古老的CSS属性,目前几乎所有浏览器都支持。

完整的兼容性如下截图所示:

line-break兼容性截图

属性虽不常见,但是关键时候顶用,脑中存个档,需要的时候能够记起来就可以了。

三、结尾的点唠叨

今天是春节假期最后一天,应该说是我们公司假期最后一天,阅文和腾讯一样,春节前后比法定假日多放一天。

春节假期开始到现在,写了12篇文章(包括本文),还有一篇待写。

很多春节计划都没完成。

例如以前写的小说重新梳理调整下,Github登录API调整,《CSS新世界》书稿review。

待会儿去看场电影,估计2个小时,然后把最后一篇文章写完,应该3小时左右。然后review书稿,这个工作可能要一周,由于延期,需要和编辑说下。

事儿多,忙不完。

今年又会是忙碌不止的1年。

(本篇完)

分享到:


发表评论(目前5 条评论)

  1. DYBOY说道:

    鑫哥,你好,最近研究发现在safari和chrome上字体加粗font-weight/b标签/strong标签,由于字体没有加粗字体,所以导致在两种浏览器上的加粗效果不一致(换行问题),safari的加粗合成是增加了文字的宽度,chrome没有,font-synthesis:none会使得safari下无加粗效果,但可以保持排版一致,请问您对这方面有无深入研究or解决办法,感谢您的解答

    • 张 鑫旭说道:

      这个本质上是跟着字体走的,有的字体包含字宽信息,OS X系统默认中文字体多包含字重、简繁体、字宽等信息,因此表现会更好,而Windows系统下的默认中文字体都没有这些字体特征。

  2. uames说道:

    而句号。是避首标点,必能出现在开头。
    应该是:而句号。是避首标点,不能出现在开头?

  3. meepo说道:

    这些细节都可以提升小说阅读体验啊 ,尤其移动端

  4. 某某某说道:

    真的是一个从来没听说过但支持如此好的