toc

Intro

当文本超出边界之后可能会需要文本换行显示，因此就会需要css的文本换行属性。

不可否认IE浏览器在文字处理方面走在了其他的浏览器前面，IE定义了较为详细的文字多行显示属性。

• line-break 控制日文的换行
• word-wrap 属性为break-word时，文本换行。
• word-break 属性为break-all时容许非东亚单词在字内断开；属性为keep-all时不容许东亚字符（如中文、韩文、日文）在字内断开。
• white-space 属性为nowrap时，强制文字在一行显示，不容许换行；属性为pre时，显示预定义的文本格式。

css3中纳入上述的几个属性（link）下面以demo为例探究下在容器宽度较小的情况下不同属性在不同浏览器的表现。

1.在不使用上述属性的情况下（或者word-wrap;word-break均取normal时），各个浏览器的表现一样，如下图所示，浏览器对中文的渲染呈现很好，会自动换行，但是长单词（blog.hicc.me类似于长单词）会溢出盒子，不换行。

2.设置word-wrap:break-word;各个浏览器表现一致，可以看到长单词已经断开。 3.设置word-wrap:break-word;word-break:keep-all;时浏览器表现一致。 4.设置word-wrap:break-word;word-break:break-all;的时候可以看到浏览器对于非东亚字体的处理比较激进，对于到达边界的字体，即使在字内也进行强制断开。但是值得注意的是FF的表现比较“正常”。 因此总结来说：

1. 浏览器对中文的处理很为友好，在到达容器边界的情况下都会自动换行，因此在中文情况或者没有url之类的长英文单词的情况下，可以让浏览器自行处理，无需设置多余的css。
2. 而对于会出现长单词的情况下，使用word-wrap:break-word；即可控制换行，不推荐使用word-break:break-all；这会严重的破坏阅读。

最后可以对于浮动元素设置了word-wrap属性所引起的IE6 7 所引起的bug可以查看淘宝ued的word wrap解惑的博文，上述的观点基本来自ued的博文。