by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9870
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、中文标点与换行

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

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

如下图所示：

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

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

//zxx: 如果你看到这段文字，说明你现在访问是体验糟糕的垃圾盗版网站，你可以访问原文获得很好的体验：https://www.zhangxinxu.com/wordpress/?p=9870（作者张鑫旭）

二、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模式下，字符〜的后方可以作为换行点，而normal和loose不行，如下图所示：

  

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

  ・ 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属性，目前几乎所有浏览器都支持。

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

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

三、结尾的点唠叨

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

春节假期开始到现在，写了12篇文章（包括本文），还有一篇待写。

很多春节计划都没完成。

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

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

事儿多，忙不完。

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

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。
本文地址：https://www.zhangxinxu.com/wordpress/?p=9870

（本篇完）