強制換行與強制不換行的區別有哪些

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

強制換行與強制不換行用到的屬性

我們一般控制換行所用到的CSS屬性一共有三個：word-wrap; word-break; white-space。這三個屬性可以說是專為了文字斷行而創造出來的。首先我們得知道這三個屬性到底是做什么用地：

word-wrap語法：

word-wrap: normal(默認) | break-word
各個瀏覽器均能識別

參數：

normal: 允許內容頂開指定的容器邊界。
break-word: 內容將在邊界內換行。必要時會觸發word-break（注意：請分辨清楚word-break和break-word這倆個是不同的東西，一為屬性另為參數）。

說明：

word-wrap是控制是否“為詞斷行”的，設置或檢索當前行超過指定容器的邊界時是否斷開轉行。中文沒有任何問題，英文語句也沒問題。但是對于長串的英文，就不起作用。

范例：

congratulation這個單詞屬于長串英文，word-wrap:break-word整個單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷，這就是對于長串文字不起作用的解釋。word-wrap:normal是默認情況，英文單詞不被拆開。

結論：

作用范圍僅為div這類標準塊級元素，th,td這類table元素雖然識別但是沒有效果（如果為td,th加上寬度word-wrap在IE下是能夠發揮效果的，但根據完全兼容性方便記憶角度上來說還是以前面的結論為準）。

word-break語法：

word-break: normal(默認) | break-all | keep-all
Firefox、Opera不能識別

參數：

normal: 依照亞洲語言和非亞洲語言的文本規則，允許在字內換行。
break-all: 該行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本。
keep-all: 與所有非亞洲語言的normal相同。對于中文，韓文，日文，不允許字斷開。適合包含少量亞洲文本的非亞洲文本。

說明：

word-break:break-all，是斷開單詞。在單詞到邊界時，下個字母自動到下一行。主要解決了長串英文的問題（恰恰彌補了上面word-wrap:break-word對于長串文字不起作用的缺陷）。

范例：

繼續以上面congratulation這個單詞屬于長串英文，word-break:break-all它會把單詞截斷，該行末端就會變成類似conra(congratulation的前端部分)，下一行為tulation（conguatulation）的后端部分了。
word-break:keep-all，是指Chinese, Japanese, and Korean不斷詞。即只用此時，不用word-wrap，中文就不會換行了。（英文語句正常。）

結論：

作用范圍僅為div這類標準塊級元素，th,td這類table元素雖然識別但是沒有效果（經測試Chrome下word-break:break-all是有效果的，但根據完全兼容性方便記憶角度上來說還是以前面的結論為準）。Firefox,Opera是無法識別word-break的，更不用提Firefox下的th,td中使用word-break的效果了。

white-space語法：
white-space: normal(默認) | pre | nowrap

參數：

normal: 默認?？瞻讜粸g覽器忽略。
pre: 空白會被瀏覽器保留。其行為方式類似HTML中的pre標簽。
nowrap: 文本不會換行，文本會在在同一行上繼續，直到遇到br標簽為止。

說明：

對于pre屬性，其實就是HTML中連續的多個空白符會被合并，然后為了不讓他合并（最常用的場合就是表示代碼文字縮進）讓其中的空白符繼續保留而不需要我們增加額外的樣式和標簽來控制它的縮進和換行。pre標簽的原理也是一樣的內部默認有了個white-space:pre。
對于nowrap屬性，這個是強制不換行核心，一般強制不換行就是利用這個屬性。Firefox的div和td中，以及IE的div中，均沒有問題。唯一的瑕疵就是在IE的td中會有一個問題，如果td沒有指定寬度，則nowrap仍然有效，如果td有寬度，并且文字中無標點、無空格（例如中文長串文字），nowrap則不再有效。解決方式就是可以加word-break:keep-all;可以解決此問題。

總結強制換行：

如果在div這類標準塊級元素中需要強制換行，最普遍的方案那就是word-wrap:break-word; word-break:break-all;此方式的缺點就是會導致如果恰巧該行末端寬為一個長串英文單詞，那么該單詞會被撕開的尷尬樣式(而且FF不識別word-break，反而不會撕開這個單詞)。個人認為如果你這個div里面放的類似于URL這個長串地址，那么用此方案是非常不錯的選擇（注意：由于FF不識別word-break，所以無法保證每行末端會整齊的斷開URL單詞，但這也是無奈的選擇）。如果不是放置URL這類可以斷開的長串英文，而是英文句子的話，那么使用word-wrap:break-word;即可。至于網上看到有word-wrap:break-word; overflow:hidden;這么個寫法，據說可以兼容IE和FF，但經過親自測試似乎沒有什么特別效果。當然，如果你有更好的方案也可以留言參與討論，這里也十分歡迎您的意見。

如果是在td,th這類table元素中需要強制換行，個人比較推薦的方式為：先為table設定table-layout:fixed，至于為什么要設定這個屬性可參考我的《拿什么來拯救你，我的Table》這篇文章，里面有比較詳細的說明?；旧显O定完這個屬性后基本的換行問題都能夠解決而不會出現table中td,th因為里面各個內容的多寡發生搶奪其他td,th寬度的情形發生。這時如果你依舊有強制換行問題，那么在此td中內部加一層div，那么情況就會像上面討論的方式來解決。

總結強制不換行：

強制不換行的問題到是比較容易分析的，就如上面所討論的那樣使用white-space:nowrap，Firefox的div和td中，以及IE的div中，均沒有問題。唯一的瑕疵就是在IE的td中會有一個問題，如果td沒有指定寬度，則nowrap仍然有效，如果td有寬度，并且文字中無標點、無空格（例如中文長串文字），nowrap則不再有效。解決方式就是可以加word-break:keep-all;可以解決此問題。綜合下來，比較穩妥的方式是在文字與td之間再套一層div，然后使用nowrap，那么就是強制不換行。注意這時候很有可能文字會過多導致溢出容器，所以你還得加一個overflow:hidden，防止溢出容器，這樣子就可以兼容各個瀏覽器了。

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