關於換行以及換行屬性_ZenDei技術網路在線

對於CSS的white space屬性，我想大部分人應該和我差不多，最常用的就是nowrap屬性，最多用來做超長省略號顯示的時候會用到【hiahiahia~】起因是這樣的：產品doggie策划了一個元旦活動，活動主頁最下邊需要顯示配置的活動規則，註意，是配置的活動規則，所以，免不了運營小妹要在後臺 ...

對於CSS的white-space屬性，我想大部分人應該和我差不多，最常用的就是nowrap屬性，最多用來做超長省略號顯示的時候會用到【hiahiahia~】

起因是這樣的：產品doggie策划了一個元旦活動，活動主頁最下邊需要顯示配置的活動規則，註意，是配置的活動規則，所以，免不了運營小妹要在後臺配置一個活動規則，肯定不指望她們能配置html文本的呀，對吧，於是她們配置的是這樣的：

    1、封墊蘇菲房間都是克拉夫；
    2、對方薩芬的刷分放大；
    3、粉打發打發打發

這樣色的，於是，取數據的時候，那隱藏的換行符免不了就被帶走了~走了~了，它就變成了一個真正的，換行符。就像word文檔裡面看見的那樣

於是，頁面呈現與DOM結構就變成了這樣

顯然，這不是我們真實想要它呈現的效果，我們當然是想它能聰明的在該換行的時候換行呀，對吧，那麼問題來了，為什麼，它沒有換行呢？

換行符

阿望腦袋裡能記下來的換行符一共有4種

\n：最初接觸\n，是學C語言換行的時候，釋義為：輸入完一行內容後，游標轉到下一行的起始位置
\r\n：回車換行（回車：回車就是把水平位置複位，換行：換行就是往下一行，不改變水平位置，可以想象一下，在word文檔中點擊鍵盤迴車鍵，其實執行的是回車+換行的操作）
<br />：這個換行符是HTML唯一能識別的換行標簽
↵：word文檔軟回車標記

當然，除了這幾種，不同的語言可能會有它們自己的換行符，比如C++的endl，VB的空格+下劃線

百度百科顯示，word換行符是一種換行符號，它的作用是換行顯示，但是它不是真正的段落標記，它的換行不是真正意義上的重起一段，因此被換行符分割的文字其實仍然還是一個段落中的，word中基於段落的所有操作都是不會識別換行符為段落結尾的，再加上在HTML中，只能識別br標簽來做基本的文本換行，所以，這也就是文章開頭說的，為什麼word軟回車換行符不能在HTML中正確回車顯示了。

HTML中的換行

在HTML中，換行可以有以下幾種辦法

塊級元素包裹

這個就不多做解釋了，塊級元素最基本的定義就是一般都從新行開始，相鄰的塊級元素將會在不同行顯示，預設了它的換行行為

br 標簽

br 是HTML中預設的、唯一的可識別的換行元素，在要換行的地方加進去就行，它是一個自閉合標簽

pre 標簽

來，解釋一下上面才說了br 是HTML中預設的、唯一的可識別的換行元素，怎麼突然有冒了個pre標簽出來！

pre 元素可定義預格式化的文本，被包圍在 pre 元素中的文本通常會保留空格和換行符，而文本也會呈現為等寬字體，所以，並不是因為它被識別成了換行元素才導致換行，而是因為，它保留了文本節點最原始的格式，你給我什麼，我還你什麼，而不是像其他的元素，你給我充滿換行符合空格的文本，我給你被我壓縮壓縮再壓縮的瘦身版文本

友情提示：它不僅可以保留換行格式，還可以保留你的多個空格噢，因為pre元素預設帶有樣式 white-space: pre;

舉個慄子

    <pre>
        1、封墊蘇菲房間都     是克拉夫；
        2、對方薩芬的刷分放大；
        3、粉打發打發打發
    </pre>

    // 顯示
    1、封墊蘇菲房間都     是克拉夫；
    2、對方薩芬的刷分放大；
    3、粉打發打發打發

    <div>
        1、封墊蘇菲房間都     是克拉夫；
        2、對方薩芬的刷分放大；
        3、粉打發打發打發
    </div>

    // 顯示
    1、封墊蘇菲房間都 是克拉夫； 2、對方薩芬的刷分放大； 3、粉打發打發打發

鑒於對pre標簽的無知，在阿望還在做JSP的時候，遇到這種換行的需求通常都是正則表達式將換行符轉換成br標簽，然後通過HTML（vue的v-html）渲染成換行的DOM節點，相信也是大多數人的第一選擇

    '我的字元串1\r\n\r\n\r\n\r\n我的字元串2\r\n111'.replace(/\r\n/g, '<br />')

現在想來，當初那些前輩們教下來的也是這個辦法，估計，他們也沒想到，一行CSS代碼就能解決吧。。。

CSS屬性換行

我們假設有個超長的文本節點："哈哈哈，congratulations"，我們假設有個容器長度只能裝得下"哈哈哈，con"

word-break

word-break 屬性規定自動換行的處理方法，可以讓瀏覽器實現在任意位置的換行，它是CSS3推出的新屬性（有相容性問題），用來標明怎麼樣進行單詞內的斷句

什麼叫單詞內的斷句呢？簡單點來說，就是當文本節點"哈哈哈，congratulations"在容器中顯示成了"哈哈哈，con[假設這裡換了行]gratulations"的時候，就產生了單詞內斷句。瀏覽器預設的時候，"哈哈哈，congratulations"在容器中會顯示成"哈哈哈，[假設這裡換了行]congratulations"，即：如果有一個單詞很長，導致一行中剩下的空間已經放不下它時，則瀏覽器會把這個單詞挪到下一行去

word-break一共有三個屬性值

normal 瀏覽器預設的換行規則

"哈哈哈，congratulations"在容器中會顯示成"哈哈哈，[假設這裡換了行]congratulations"

break-all 允許在單詞內換行（單詞是指non-CJK (CJK 指中文/日文/韓文) 文本）

"哈哈哈，congratulations"在容器中會顯示成"哈哈哈，con[假設這裡換了行]gratulations"

keep-all 只能在半形空格或連字元處換行

CJK 文本不斷行， Non-CJK 文本表現同 normal

word-wrap

word-wrap 屬性允許長單詞或 URL 地址換行到下一行

word-break一共有兩個屬性值

normal 只在允許的斷字點換行（瀏覽器保持預設處理）

break-word 在長單詞或 URL 地址內部進行換行

那麼它與word-break的區別是什麼呢？

首先看我們的前提條件：有個超長的文本節點："哈哈哈，congratulations"，我們假設有個容器長度只能裝得下"哈哈哈，con"，那麼意味著，不添加word-break與word-wrap屬性的時候，該文本節點在容器內顯示為"哈哈哈，[假設這裡換了行]congratulations"，且單詞congratulations肯定是衝出了容器邊界的，超級難看。這個時候word-wrap就能派上用場了，給這段文字加上word-wrap: break-word之後，文本節點就會顯示成"哈哈哈，[假設這裡換了行]congratula[假設這裡換了行]tions"，這樣，為了防止長單詞溢出，就在它的內部斷句了

那既然有word-wrap，又為什麼要有word-break屬性呢？簡單來說，當設置word-break:break-all; word-wrap:break-word，我們的超長文本"哈哈哈，congratulations"就會顯示成"哈哈哈，con[假設這裡換了行]gratulatio[假設這裡換了行]ns"，它的用處就是：節省空間！是的，你沒有看錯！

word-wrap 是用來決定允不允許單詞內斷句的，如果不允許的話長單詞就會溢出。最重要的一點是它還是會首先嘗試挪到下一行，看看下一行的寬度夠不夠，不夠的話就進行單詞內的斷句