在編寫CSS樣式時,經(jīng)常會遇到英文單詞太長而導(dǎo)致樣式錯亂的情況。這時候我們就需要使用換行不斷詞的方式來解決這個問題。
.long-word { word-wrap: break-word; }
上面的代碼中,我們使用了word-wrap: break-word;
來實現(xiàn)換行不斷詞的效果。當(dāng)遇到一個單詞太長不能完整顯示時,該單詞會被自動換行,并在當(dāng)前行末尾顯示該單詞的剩余部分。
需要注意的是,只有在單詞中有連字符-
時才會觸發(fā)自動換行,如果單詞中沒有連字符,則不會自動換行。
.another-long-word { overflow-wrap: break-word; }
除了使用word-wrap
屬性外,我們還可以使用overflow-wrap
屬性來實現(xiàn)換行不斷詞的效果。這個屬性與word-wrap
作用相同,只是名稱不同而已。
總之,在編寫CSS樣式時,如果遇到英文單詞太長而導(dǎo)致樣式錯亂的情況,我們可以使用word-wrap
或overflow-wrap
屬性來解決這個問題。