经常会有一些长单词或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