textwrapping其实是一个很常见但是不起眼的特性。您无需设置任何内容，浏览器会自动换行。例如，在英文中，浏览器会根据容器的大小选择以半角空格或连字符换行。例如，在中文中，浏览器会选择在文本或标点符号处换行。但是有的时候浏览器在遇到长词或者长url的时候就没那么灵了，会出现破容器的现象，很难看。如下图，在容器设置宽度为150px的前提下，普通文字如左图足以让浏览器自动换行，而右图遇到长字或网址时，浏览器将无法做它想做的事。当然你可以设置overflow:auto;为容器使滚动条出现以避免破坏容器。或者简单地溢出：隐藏；隐藏多余的部分，见下图，但总觉得overflow不太理想，换行应该有一个特殊的属性。本文介绍三个换行属性word-wrapword-breakwhite-spaceword-wrapword-wrap可以实现分词和换行。正常，可以设置中断词。normal默认值等于不设置，不再赘述。break-word允许断词和换行。设置word-wrap:break-word后；右图中，浏览器的执行过程：发现长字无法显示。按照默认的换行规则，用半角空格换行，所以Ooops后面也有空格，长字移动到第二行，发现显示还是不够，于是word断线换行，所以长单词和URL在中间被截断了。word-breakword-break可以设置浏览器自动换行的方式。可以设置正常，全部中断，全部保留。normal默认值等于不设置，不再赘述。break-all设置浏览器的换行模式以允许基于容器大小的分词。word-wrap:break-word;和有什么区别？以上？见下图，蓝线部分。左图中word-wrap的break-word沿用了浏览器默认的换行方式，所以在“Ooopstoo”后面多了一个空格。上面有解释，我就不赘述了。右边word-break的break-all是改变浏览器默认的换行方式，让浏览器忽略半角空格，直接根据容器的大小换行。所以，遇到长字，直接断字断行。实际上，word-break:break-all;比word-wrap:break-word;节省更多的页面空间；keep-all不允许断字，在英文情况下相当于normal，相当于没有设置。对于中文、日文和韩文，正常和保留所有之间存在差异。见下图。对于日文和韩文，normal仍然表示没有设置，浏览器选择在文本或标点符号处换行。但设置为keep-all后，将不再允许断字（即使是中日韩），只能像英文系一样按半角空格或标点符号换行。white-spacewhite-space设置空格和换行符。可以设置默认值normal，可以设置pre、nowrap、pre-line、pre-wrap。效果如下图
