css設(shè)置文本元素內(nèi)空白填充的方法

小編給大家分享一下css設(shè)置文本元素內(nèi)空白填充的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

通過(guò)css的white-space屬性設(shè)置文本元素內(nèi)的空白填充

white-space屬性控制文本在應(yīng)用它的元素上的處理方式，設(shè)置如何處理元素內(nèi)的空白。

下面我們建立這樣一個(gè)html：

<div>
   A bunch of words you see.
</div>

設(shè)置div的寬度為100px。在合理的字體大小下，添加多一些的文字，來(lái)適應(yīng)100px。沒(méi)有做任何事情，默認(rèn)white-space值是normal，文本將換行。

div {
  white-space: normal; 
}

我們來(lái)看看效果圖：

如果要阻止文本換行，可以使用 white-space: nowrap;

請(qǐng)注意：在本文頂部的html代碼示例中，實(shí)際上有兩個(gè)換行符，一個(gè)位于文本行之前，另一個(gè)位于文本行之后，它們?cè)试S文本位于其自己的行中（在代碼中）。當(dāng)文本在瀏覽器中呈現(xiàn)時(shí)，這些換行符就像被刪除一樣。同樣剝離的還有第一個(gè)字母前面額外的空格。如果我們想強(qiáng)制瀏覽器顯示我們可以使用的那些換行符和額外的空格字符white-space: pre;

pre被調(diào)用是因?yàn)檫@種行為就像您將文本包裝在<pre></pre>標(biāo)簽中一樣（默認(rèn)情況下，pre標(biāo)簽可以處理空白和換行）。在HTML中，空白是完全正確的，在代碼中出現(xiàn)結(jié)束標(biāo)簽之前，文本不會(huì)被包裝。這在從字面上顯示代碼時(shí)特別有用，從某些格式化中獲得了美學(xué)上的好處（而且某些時(shí)間是絕對(duì)關(guān)鍵的，如在依賴于空白空間的語(yǔ)言中！）

也許你喜歡如何pre處理空白和斷行的方式，但是您需要包裝文本，而不是潛在地從其父容器中斷。那就是white-space: pre-wrap;：

最后，white-space: pre-line;將破壞代碼中斷的行，但仍會(huì)剝離額外的空白區(qū)域。

有趣的是，最后的換行沒(méi)有得到尊重。根據(jù)CSS 2.1規(guī)范： “在保留的換行符處打破行，并根據(jù)需要填充行框。” 所以也許這是有道理的。

這是一個(gè)了解所有不同值的行為的表：

在CSS3中，該white-space屬性實(shí)際上將遵循該圖表并將屬性映射到text-space-collapse并text-wrap相應(yīng)地。

兼容性

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

看完了這篇文章，相信你對(duì)css設(shè)置文本元素內(nèi)空白填充的方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！