寫在前面的話
??大多數標簽在展示文本內容的時候都會默認把文本中的空白和換行符去掉，這的確大大的使得文本的排版更加美觀了，也怎加了區域的利用率，可是就有一些需求是需要原原本本的展示出原汁原味的文本格式，那該如何展示出文本的內在格式呢？無外乎把不該去掉的空格展示出來，把不該合并的換行讓它換行起來，??
??那么 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 >
這是第一行，我的后面有五個空白符 我的前面有五個空白符 我的前面有三個空白符并且我的尾巴有換行符
這是第二行，我的后面有九個空白符 我的前面有九個空白符，并且我的后面有br標簽<br />我的前面有br標簽，我的后面有五個空白符
這是第三行，我的后面有九個空白符 我的前面有九個空白符，并且我的后面有br標簽<br />
</div>
</fieldset>顯示效果如下：
white-space:nowrap
和 normal 一樣，連續的空白符會被合并，但文本內的換行無效，只有使用br標簽才能換行，并且不進行軟換行，
html實體代碼如下：
white-space:nowrap
<fieldset>
<legend> white-space:nowrap</legend>
<div >
這是第一行，我的后面有五個空白符 我的前面有五個空白符 我的前面有三個空白符并且我的尾巴有換行符
這是第二行，我的后面有九個空白符 我的前面有九個空白符，并且我的后面有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 >
這是第一行，我的后面有五個空白符 我的前面有五個空白符 我的前面有三個空白符并且我的尾巴有換行符
這是第二行，我的后面有九個空白符 我的前面有九個空白符，并且我的后面有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 >
這是第一行，我的后面有五個空白符 我的前面有五個空白符 我的前面有三個空白符并且我的尾巴有換行符
這是第二行，我的后面有九個空白符 我的前面有九個空白符，并且我的后面有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 >
這是第一行，我的后面有五個空白符 我的前面有五個空白符 我的前面有三個空白符并且我的尾巴有換行符
這是第二行，我的后面有九個空白符 我的前面有九個空白符，并且我的后面有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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/538205.html
標籤：其他