這篇文章主要講解了“CSS中幾個與換行有關(guān)的屬性有哪些”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS中幾個與換行有關(guān)的屬性有哪些”吧！
word-wrap
normal 默認(rèn)值。允許內(nèi)容頂開指定的容器邊界。
break-word 內(nèi)容將在邊界內(nèi)換行。如果需要，詞內(nèi)換行也將發(fā)生。
白話解釋：也就是說如果一個很長的英文單詞如果超過了容器長度，是否折斷英文單詞，默認(rèn)是不折斷。
支持情況：IE、Firefox 3.6、Chrome 4 中測試通過。
word-break
normal 默認(rèn)值。依照亞洲語言和非亞洲語言的文本規(guī)則，允許在字內(nèi)換行。
break-all 該行為與亞洲語言的 normal 相同。也允許非亞洲語言文本行的任意字內(nèi)斷開。該值適合包含一些非亞洲文本的亞洲文本。
keep-all 與所有非亞洲語言的 normal 相同。對于中文，韓文，日文，不允許字?jǐn)嚅_。適合包含少量亞洲文本的非亞洲文本。
白話解釋：break-all 把英文單詞拆成一個一個的就像亞洲文字一樣可單獨拆開；keep-all 把一長串亞洲文字當(dāng)作是一個英文單詞一樣對待。
支持情況：IE 支持全部；Firefox 3.6 不支持全部；Chrome 4 不支持 keep-all。
white-space
normal 默認(rèn)值。默認(rèn)處理方式。文本自動處理換行。假如抵達(dá)容器邊界內(nèi)容會轉(zhuǎn)到下一行
pre 換行和其他空白字符都將受到保護(hù)。這個值需要 IE6+ 或者 !DOCTYPE 聲明為 standards-compliant mode 支持。如果 !DOCTYPE 聲明沒有指定為 standards-compliant mode ，此屬性可以使用，但是不會發(fā)生作用。結(jié)果等同于 normal 。
nowrap 強制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇 br 對象。
白話解釋：pre 源代碼中有幾個空格，顯示就有幾個空格；源代碼中有回車換行，顯示也有換行。Nowrap 不見 br 不換行，即使是中文漢字超過了容器大小。
支持情況：IE、Firefox 3.6、Chrome 4 中測試通過，不過 pre 在 IE 中的支持情況還是請參照上面的說明。
line-break
normal 默認(rèn)值。應(yīng)用日文文本的默認(rèn)換行規(guī)則。
strict 強制日文文本換行規(guī)則的嚴(yán)謹(jǐn)性。
應(yīng)用
強制換行，遇到長英文單詞，直接將詞折斷。
word-wrap:break-word;
也有人用 break-word:break-all，但考慮到兼容性，還是建議用 word-wrap:break-word;。
除非遇到 br，否則不管怎樣都不換行。
white-space:nowrap;
附：word-wrap:break-word 與 word-break:break-all 區(qū)別
word-wrap:break-word 是優(yōu)先斷單詞（根據(jù)空格判斷單詞），而 word-break:break-all 完全沒有把文字當(dāng)單詞看待，在它眼里，都是一塊一塊的字符。
這就會造成這么兩情況：
假如一個 p 有 100px 寬，而其中有很長一段無空格的英文字符，完全超過 100px 了，此時二者表現(xiàn)相同，都是在邊界處將字符截斷。
假如一個 p 有 100px 寬，其中有段文字既有中文也有英文，前面是中文，占了 70px，后面一個很長的英文單詞有 50px。對于 word-wrap:break-word 會將該單詞全部折到下一行輸出，而 word-break:break-all 會利用剩下的 30px 輸出單詞的前半部分，再到下一行輸出剩下的 20px。
支持情況：
word-wrap:break-word 受眾多瀏覽器支持；
word-break:break-all 受較少瀏覽器支持。
感謝各位的閱讀，以上就是“CSS中幾個與換行有關(guān)的屬性有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS中幾個與換行有關(guān)的屬性有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
