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

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

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

 

1. 标点不在行首

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

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

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

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