寫在前面的話 大多數標簽在展示文本內容的時候都會預設把文本中的空白和換行符去掉，這的確大大的使得文本的排版更加美觀了，也怎加了區域的利用率，可是就有一些需求是需要原原本本的展示出原汁原味的文本格式。那該如何展示出文本的內在格式呢？無外乎把不該去掉的空格展示出來，把不該合併的換行讓它換行起來。 那麼 ...
寫在前面的話
大多數標簽在展示文本內容的時候都會預設把文本中的空白和換行符去掉，這的確大大的使得文本的排版更加美觀了，也怎加了區域的利用率，可是就有一些需求是需要原原本本的展示出原汁原味的文本格式。那該如何展示出文本的內在格式呢？無外乎把不該去掉的空格展示出來，把不該合併的換行讓它換行起來。
那麼 white-space 作用具體是什麼呢？在MDN 上的解釋為 ：
- 空白字元是否以及如何它們該如何合併。
- 行是否採用軟換行（軟換行可以理解為受到父容器寬度的影響，為了避免不超出父容器而自發的換行）。
white-space的關鍵值
- white-space:normal
- white-space:nowrap
- white-space:pre
- white-space:pre-wrap
- white-space:pre-line
- white-space:break-spaces
關鍵值逐個解析
white-space:normal
連續的空白符會被合併，換行符會被當作空白符來處理。換行在填充時是必要。也就是說不管是文本中是否有空白符和換行符都會被省略。並且遇到父容器需要換行填充的時候也會自動換行。大多數的標簽white-space都是normal 。
html實例代碼如下：
white-space:normal
<fieldset>
<legend> white-space:normal</legend>
<div class="normal">
這是第一行，我的後面有五個空白符 我的前面有五個空白符 我的前面有三個空白符並且我的尾巴有換行符
這是第二行，我的後面有九個空白符 我的前面有九個空白符，並且我的後面有br標簽<br />我的前面有br標簽，我的後面有五個空白符
這是第三行，我的後面有九個空白符 我的前面有九個空白符，並且我的後面有br標簽<br />
</div>
</fieldset>顯示效果如下：
white-space:nowrap
和 normal 一樣，連續的空白符會被合併。但文本內的換行無效。只有使用br標簽才能換行，並且不進行軟換行。
html實例代碼如下：
white-space:nowrap
<fieldset>
<legend> white-space:nowrap</legend>
<div class="nowrap">
這是第一行，我的後面有五個空白符 我的前面有五個空白符 我的前面有三個空白符並且我的尾巴有換行符
這是第二行，我的後面有九個空白符 我的前面有九個空白符，並且我的後面有br標簽<br />我的前面有br標簽，我的後面有五個空白符
這是第三行，我的後面有九個空白符 我的前面有九個空白符，並且我的後面有br標簽<br />
</div>
</fieldset>顯示效果如下：
white-space:pre
連續的空白符會被保留。在遇到換行符或者<br>元素時才會換行。
順帶一說標簽pre的 white-space的預設屬性pre
html實例代碼如下：
white-space:pre
<fieldset>
<legend> white-space:pre</legend>
<div class="pre">
這是第一行，我的後面有五個空白符 我的前面有五個空白符 我的前面有三個空白符並且我的尾巴有換行符
這是第二行，我的後面有九個空白符 我的前面有九個空白符，並且我的後面有br標簽<br />我的前面有br標簽，我的後面有五個空白符
這是第三行，我的後面有九個空白符 我的前面有九個空白符，並且我的後面有br標簽<br />
</div>
</fieldset>顯示效果如下：
white-space:pre-wrap
連續的空白符會被保留。在遇到換行符或者<br>元素，或者需要為了填充時才會換行（軟換行）。
html實例代碼如下：
white-space:pre-wrap
<fieldset>
<legend> white-space:pre-wrap</legend>
<div class="pre-wrap">
這是第一行，我的後面有五個空白符 我的前面有五個空白符 我的前面有三個空白符並且我的尾巴有換行符
這是第二行，我的後面有九個空白符 我的前面有九個空白符，並且我的後面有br標簽<br />我的前面有br標簽，我的後面有五個空白符
這是第三行，我的後面有九個空白符 我的前面有九個空白符，並且我的後面有br標簽<br />
</div>
</fieldset>顯示效果如下：
white-space:pre-line
連續的空白符會被合併。在遇到換行符或者<br>元素，或者需要為了填充時會換行（軟換行）。
html實例代碼如下：
white-space:pre-line
<fieldset>
<legend> white-space:pre-line</legend>
<div class="pre-line">
這是第一行，我的後面有五個空白符 我的前面有五個空白符 我的前面有三個空白符並且我的尾巴有換行符
這是第二行，我的後面有九個空白符 我的前面有九個空白符，並且我的後面有br標簽<br />我的前面有br標簽，我的後面有五個空白符
這是第三行，我的後面有九個空白符 我的前面有九個空白符，並且我的後面有br標簽<br />
</div>
</fieldset>顯示效果如下：
white-space:break-spaces
break-spaces 與 pre-wrap的行為相同，也就是說連續的空白符會被保留。在遇到換行符或者<br>元素，或者需要為了填充時才會換行（軟換行）。除了：
- 任何保留的空白序列總是占用空間，包括在行尾。如果行尾的空白符夠多就會看到空白符占用了一行，pre-wrap 是沒有這種現象的。
- 每個保留的空格字元後都存在換行機會，包括空格字元之間。
- 這樣保留的空間占用空間而不會掛起，從而影響盒子的固有尺寸（最小內容大小和最大內容大小）。
html實例代碼如下：
顯示效果如下：
以下表格是對white-space 各個關鍵值的綜合對比
| 關鍵字名稱 | 換行符 | 空格和製表符 | 文字換行 | 行尾空格 |
| normal | 合併 | 合併 | 換行 | 刪除 |
| nowrap | 合併 | 合併 | 不換行 | 刪除 |
| pre | 保留 | 保留 | 不換行 | 保留 |
| pre-wrap | 保留 | 保留 | 換行 | 掛起 |
| pre-line | 保留 | 合併 | 換行 | 刪除 |
| break-spaces | 保留 | 保留 | 換行 | 換行 |
以上使用的樣式部分的公共代碼如下：
css公共代碼
<style>
div {
border: 1px solid #eee;
margin: 30px;
padding: 30px;
max-width: 400px;
}
.normal {
white-space: normal
}
.nowrap {
white-space: nowrap
}
.pre {
white-space: pre
}
.pre-wrap {
white-space: pre-wrap
}
.pre-line {
white-space: pre-line
}
.break-spaces {
white-space: break-spaces
}
</style>總結：
在不知道有這個屬性的時候，往往會想到將換行符替換成<br/>標簽進行換行，現在要實現同樣的效果，設置一下white-space的值就搞定了。快的呢！
微信公公眾號 搜索 “不正經小前端” 並關註，和我一起學習海量前端技術本文來自博客園，作者：七分暖，轉載請註明原文鏈接：https://www.cnblogs.com/lin494910940/p/16917049.html
