说说html <p>元素的文本换行

今天通过measureText()方法计算文字宽度，想实现文字左右滑动翻页的效果。却发现某些地方老是不对，后来才发现是换行规则在作怪。

这里就不说word-wrap和word-break这两个css样式了，因为问题与它们无关，姑且保持默认。另外下面的内容都是在指定浏览器下测试，其他浏览器不保证一致。

1. 标点不在行首

这是众所周知的规则，如果自动换行时发现标点在行首，会向前寻找非标点字符作为新行的开始，除非向前找了一行都没找到不是标点的字符。如图。

句号那里为了保证所有句号都不在行首，只能把前面的我拿下来做行首，第一个感叹号处同理。但后面感叹号太多了，无法保证每一个都不在行首，所以没办法，浏览器只能强行拆行了。

但“标点”的范围是怎么定义的呢？不同的浏览器的实现有所不同。但一般的，至少下面这些标点不能在行首（包括但不限于）：

. , : ; ! ? " ' ) ] } |。？！，、；：”’）》〉】』」﹄〕…

 不知道你有没有发现，成对出现的标点只有闭合的部分才不允许出现在行首，而像[、(、【之类的开始标点是允许出现在行首的。这条规则基本上通用。

值得注意的是，对于中文左引号（包括单双左引号），各浏览器的处理是不一致的。测试了Edge，Chrome 75.0，Firefox 67.0，IE11，除了Firefox67.0，其它浏览器都不允许中文左引号在行首。

2. 引号不在行末

相比起第一条，这条规则要陌生得多。

对于中文左引号，各浏览器的行为基本一致，都禁止左引号在行末。但经测试，在Firefox 67.0中，中文右引号或者英文引号却允许出现在行末，而其它浏览器则一视同仁。

对引号的处理最有争议，这里再总结一下。