在網(wǎng)上有一種說法,稱在CSS中使用word-wrap:break-word;
可以讓長單詞或URL在超出容器寬度時自動換行,而這種換行方式是無論單詞內(nèi)部是否有空格都會強(qiáng)制換行的。
例如,以下代碼:
.container { width: 100px; border: 1px solid black; word-wrap: break-word; }
如果在一個寬度為100px的容器中輸入一段沒有空格的URL(例如:www.abcdefghijklmnopqrstuvwxyz.com
),那么這個URL就會被強(qiáng)制分割成一段一段的。
然而,經(jīng)過實驗后我們發(fā)現(xiàn),這種說法實際上是不準(zhǔn)確的。在某些瀏覽器(如Chrome)中,如果單詞內(nèi)部沒有空格,那么仍然會出現(xiàn)單詞被裁剪而不是換行的情況:
.container { width: 100px; border: 1px solid black; word-wrap: break-word; } <p>在這個例子中,輸入的單詞長度很長且沒有空格,所以在Chrome瀏覽器中單詞并沒有自動換行,而是被裁剪截斷了。</p>
因此,雖然使用word-wrap:break-word;
可以讓長單詞或URL在容器寬度不夠的情況下自動換行,但并不能保證一定能夠讓單詞內(nèi)部自動換行,視瀏覽器而定。
上一篇css換行文字隱藏
下一篇css控制元素緊貼頂部