CSS中幾個與換行有關的屬性有哪些

這篇文章主要講解了“CSS中幾個與換行有關的屬性有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS中幾個與換行有關的屬性有哪些”吧！

word-wrap

 normal 默認值。允許內容頂開指定的容器邊界。
 break-word 內容將在邊界內換行。如果需要，詞內換行也將發生。
 白話解釋：也就是說如果一個很長的英文單詞如果超過了容器長度，是否折斷英文單詞，默認是不折斷。
 支持情況：IE、Firefox 3.6、Chrome 4 中測試通過。

word-break
 
 normal 默認值。依照亞洲語言和非亞洲語言的文本規則，允許在字內換行。
 break-all 該行為與亞洲語言的 normal 相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本。
 keep-all 與所有非亞洲語言的 normal 相同。對于中文，韓文，日文，不允許字斷開。適合包含少量亞洲文本的非亞洲文本。
 白話解釋：break-all 把英文單詞拆成一個一個的就像亞洲文字一樣可單獨拆開；keep-all 把一長串亞洲文字當作是一個英文單詞一樣對待。
 支持情況：IE 支持全部；Firefox 3.6 不支持全部；Chrome 4 不支持 keep-all。

white-space
 
 normal 默認值。默認處理方式。文本自動處理換行。假如抵達容器邊界內容會轉到下一行
 pre 換行和其他空白字符都將受到保護。這個值需要 IE6+ 或者 !DOCTYPE 聲明為 standards-compliant mode 支持。如果 !DOCTYPE 聲明沒有指定為 standards-compliant mode ，此屬性可以使用，但是不會發生作用。結果等同于 normal 。
 nowrap 強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象。
 白話解釋：pre 源代碼中有幾個空格，顯示就有幾個空格；源代碼中有回車換行，顯示也有換行。Nowrap 不見 br 不換行，即使是中文漢字超過了容器大小。
 支持情況：IE、Firefox 3.6、Chrome 4 中測試通過，不過 pre 在 IE 中的支持情況還是請參照上面的說明。

line-break
 
 normal 默認值。應用日文文本的默認換行規則。
 strict 強制日文文本換行規則的嚴謹性。
 應用
強制換行，遇到長英文單詞，直接將詞折斷。

word-wrap:break-word;
 
 也有人用 break-word:break-all，但考慮到兼容性，還是建議用 word-wrap:break-word;。
 除非遇到 br，否則不管怎樣都不換行。
white-space:nowrap;

附：word-wrap:break-word 與 word-break:break-all 區別

word-wrap:break-word 是優先斷單詞（根據空格判斷單詞），而 word-break:break-all 完全沒有把文字當單詞看待，在它眼里，都是一塊一塊的字符。
 這就會造成這么兩情況：
 假如一個 p 有 100px 寬，而其中有很長一段無空格的英文字符，完全超過 100px 了，此時二者表現相同，都是在邊界處將字符截斷。
 假如一個 p 有 100px 寬，其中有段文字既有中文也有英文，前面是中文，占了 70px，后面一個很長的英文單詞有 50px。對于 word-wrap:break-word 會將該單詞全部折到下一行輸出，而 word-break:break-all 會利用剩下的 30px 輸出單詞的前半部分，再到下一行輸出剩下的 20px。
 支持情況：
 word-wrap:break-word 受眾多瀏覽器支持；
 word-break:break-all 受較少瀏覽器支持。

感謝各位的閱讀，以上就是“CSS中幾個與換行有關的屬性有哪些”的內容了，經過本文的學習后，相信大家對CSS中幾個與換行有關的屬性有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！