關於換行以及換行屬性

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

原由是這樣的：產品doggie策劃了一個元旦活動，活動主頁最下邊須要顯示配置的活動規則，注意，是配置的活動規則，因此，免不了運營小妹要在後臺配置一個活動規則，確定不期望她們能配置html文本的呀，對吧，因而她們配置的是這樣的：

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

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

因而，頁面呈現與DOM結構就變成了這樣

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

換行符

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

1. \n：最初接觸\n，是學C語言換行的時候，釋義爲：輸入完一行內容後，光標轉到下一行的起始位置
2. \r\n：回車換行（回車：回車就是把水平位置復位，換行：換行就是往下一行，不改變水平位置，能夠想象一下，在word文檔中點擊鍵盤迴車鍵，其實執行的是回車+換行的操做）
3. <br />：這個換行符是HTML惟一能識別的換行標籤
4. ↵：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>
        一、封墊蘇菲房間都     是克拉夫；
        二、對方薩芬的刷分放大；
        三、粉打發打發打發
    </pre>

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

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

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

鑑於對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 是用來決定允不容許單詞內斷句的，若是不容許的話長單詞就會溢出。最重要的一點是它仍是會首先嚐試挪到下一行，看看下一行的寬度夠不夠，不夠的話就進行單詞內的斷句

word-break:break-all則更粗暴，直接進行單詞內的斷句

white-space

white-space 屬性設置如何處理元素內的空白，這個屬性聲明創建佈局過程當中如何處理元素中的空白符，實際上會對列表溢出換行和文字溢出進行處理

空白符

空白符是指在屏幕不會顯示出來的字符（如空格，製表符tab，回車換行等），HTML默認已經把全部空白符合併成一個空格

white-space一共有五個屬性值

normal 默認，空白符會被瀏覽器忽略

多個空格合併成1個空格，換行符被忽略，在容器寬度內自調整換行

pre 空白會被瀏覽器保留，其行爲方式相似 HTML 中的 pre 標籤

多個空格被保留，換行符被保留，不會在容器寬度內自調整換行，直到遇到 br 標籤爲止

nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 br 標籤爲止

多個空格合併成1個空格，換行符被忽略，不會在容器寬度內自調整換行，這是它與默認行爲不同的地方

pre-wrap 保留空白符序列，可是正常地進行換行

多個空格被保留，換行符被保留，在容器寬度內自調整換行

pre-line 合併空白符序列，可是保留換行符

多個空格合併成1個空格，換行符被保留，在容器寬度內自調整換行

inherit 規定應該從父元素繼承 white-space 屬性的值

以上，可根據實際狀況選擇本身想要的屬性值

另：若換行處想添加連字符，將congratulations換行顯示爲con-gratulatio-ns的話，可以使用屬性hyphens：auto;在適當的位置自動插入連字符換行