經(jīng)常會(huì)有一些長單詞或URL铸磅,因?yàn)殚L度過長以致一行放不下缀遍,就會(huì)導(dǎo)致文本溢出慕匠。
要么出現(xiàn)滾動(dòng)條,要么會(huì)被截?cái)嗫床灰姟?/p>
為了應(yīng)對這種情況域醇,可以使用css的word-wrap
屬性台谊。
p.test {word-wrap:break-word;}
/* 這樣就允許長單詞換行到下一行了 */
所有主流瀏覽器都支持 word-wrap 屬性 [1]。
但值得注意的是譬挚,word-wrap 屬性原本屬于微軟的一個(gè)私有屬性锅铅,在 CSS3 現(xiàn)在的文本規(guī)范草案中已經(jīng)被重名為 overflow-wrap
。 word-wrap 現(xiàn)在被當(dāng)作 overflow-wrap 的 “別名”减宣。 穩(wěn)定的谷歌 Chrome 和 Opera 瀏覽器版本支持這種新語法 [2]盐须。
因此,由于歷史原因漆腌,當(dāng)你使用 <' overflow-wrap '> 時(shí)贼邓,最好同時(shí)使用 <' word-wrap '> 作為備選,作向前兼容 [3]闷尿。
參考資料
[1] CSS3 word-wrap 屬性
[2] overflow-wrap - mozilla
[3] overflow-wrap