CSS长文本溢出自动换行

经常会有一些长单词或URL，因为长度过长以致一行放不下，就会导致文本溢出。
要么出现滚动条，要么会被截断看不见。

为了应对这种情况，可以使用css的word-wrap属性。

p.test {word-wrap:break-word;}
/* 这样就允许长单词换行到下一行了 */

所有主流浏览器都支持 word-wrap 属性 [1]。

但值得注意的是，word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法 [2]。

因此，由于历史原因，当你使用 <' overflow-wrap '> 时，最好同时使用 <' word-wrap '> 作为备选，作向前兼容 [3]。

参考资料

[1] CSS3 word-wrap 属性
[2] overflow-wrap - mozilla
[3] overflow-wrap