css如何設定文字元素內的空白填充？

css如何設定文字元素內的空白填充？這篇文章帶給大家的內容是介紹css設定文字元素內空白填充的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

今天要介紹給大家的是透過css的white-space屬性設定文字元素內的空白填色。下面我們就來了解white-space屬性。

white-space屬性控製文字在套用它的元素上的處理方式，設定如何處理元素內的空白。

下面我們建立這樣一個html：

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

設定div的寬度為100px。在合理的字體大小下，添加多一些的文字，來適應100px。沒有做任何事情，預設white-space值是normal，文字將換行。

div {
  white-space: normal; 
}

我們來看看效果圖：

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

請注意：在本文頂部的html程式碼範例中，實際上有兩個換行符，一個位於文字行之前，另一個位於文字行之後，它們允許文字位於其自己的行中（在程式碼中）。當文字在瀏覽器中呈現時，這些換行符號就像被刪除一樣。同樣剝離的還有第一個字母前面額外的空格。如果我們想要強制瀏覽器顯示我們可以使用的那些換行符和額外的空格字元white-space: pre;

pre被呼叫是因為這種行為就像您將文字包裝在

標籤中一樣（預設情況下，pre標籤可以處理空白和換行）。在HTML中，空白是完全正確的，在程式碼中出現結束標籤之前，文字不會被包裝。這在從字面上顯示程式碼時特別有用，從某些格式化中獲得了美學上的好處（而且某些時間是絕對關鍵的，如在依賴於空白空間的語言中！）

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

最後，white-space: pre-line;會破壞程式碼中斷的行，但仍會剝離額外的空白區域。

有趣的是，最後的換行沒有被尊重。根據CSS 2.1規範： 「在保留的換行符處打破行，並根據需要填充行框。」 所以也許這是有道理的。

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

在CSS3中，該white-space屬性實際上將遵循該圖表並將屬性映射到text-space-collapse並text-wrap相應地。

相容性

表格中的數字表示支援該屬性的第一個瀏覽器版本號。

總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。

以上是css如何設定文字元素內的空白填充？的詳細內容。更多資訊請關注PHP中文網其他相關文章！