關於文字轉行屬性word-break和word-wrap的用處和區別


word-break:break-all; 和 word-wrap:break-word;兩種寫法都是讓英文句子在父級寬度不夠的情況下換行。

兩個屬性都同樣是讓文字換行,但存在着細微的區別,大部分時候剛接觸到這兩個屬性時會無法區別兩個的區別

下面講一下兩者的區別:

 word-wrap:break-word; 作用是強制讓文字換行。 一般情況下當父級寬度不夠的時候,不管英文單詞自動換行是當一整個單詞不夠放時,整個單詞一起換行到下一行,

看似很合理的寫法,但是在有些情況下會出現不可預期的情況。 就是當一個英文單詞的長度超過了父級容器長度是,英文單詞還是會顯示一整個單詞而導致超出容器范圍。

還有的情況是,當遇到一個單詞很長時,次單詞自動換行,也會使上一行空出很多空間浪費了。

在這種情況下,IE創造出一種新的屬性,word-break:break-all; 它強制文字換行無論一句話到達父級容器寬度的時候是不是一整個單詞,都會強制換行,使單詞斷句,

如果碰上一個單詞超出父級容器寬度,會使單詞斷開並換行。

兼容性:

word-break:break-all; 只不兼容opera,其他瀏覽器都兼容

word-wrap:break-word;兼容所有瀏覽器

兩種寫法的各有作用,應視情況做出選擇!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM