跟大家講解下有關CSS的white-space屬性怎么使用，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說CSS的white-space屬性怎么使用，小編也收集到了有關CSS的white-space屬性怎么使用的相關資料，希望大家看到了會喜歡。
CSS中white-space屬性是用于設置如何在源文本中顯示連續的單字節空格，使用Tab縮進以及在頁面上顯示換行符，接下來的這篇文章就來給大家介紹關于CSS中white-space屬性的使用方法。
話不多說，下面我們來看具體的內容
white-space屬性如何使用？
white-space屬性的描述如下
white-space: 值;white-space屬性的值有以下幾個
normal：默認。空白會被瀏覽器忽略。
pre：空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。
nowrap：文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。
pre-wrap：保留空白符序列，但是正常地進行換行。
pre-line：合并空白符序列，但是保留換行符。
我們來看具體的示例
代碼如下
HTML代碼
<!DOCTYPE html><html><head><meta charset=”utf-8″ /><link rel=”stylesheet” href=”sample.css” type=”text/css”></head><body><p>兩個或多個 單字節的 空格</p></body></html>我們在第一行的“兩個或多個”和“單字節的空格”之間插入多個單字節空格，并在第二行的斷開處通過Tab鍵插入縮進。
通過CSS將其放在寬度為200像素的盒子中，并在應用每個white-space屬性值時比較顯示。
當值是normal時
CSS代碼
p {width:200px; background-color:#87cefa; white-space: normal; }它在頁面上顯示如下。所有連續的單字節空格，制表符空格和換行符都被視為一個單字節空格，并且根據框的寬度進行換行。
當值是pre時
CSS代碼
p {width:200px; background-color:#87cefa; white-space: pre; }在頁面上顯示如下效果，都沒有變化
當值為nowrap時
CSS代碼
p {width:200px; background-color:#87cefa; white-space: nowrap; }在頁面顯示如下所示，不會換行
當值為pre-wrap時
CSS代碼
p {width:200px; background-color:#87cefa; white-space: pre-wrap; }在頁面上顯示如下效果，除了pre的狀態外，還有一個換行的區域
當值為pre-line時
CSS代碼
p {width:200px; background-color:#87cefa; white-space: pre-line; }在頁面顯示如下效果
以上就是本篇文章的全部內容了，關于更多的相關內容大家可以移步到PHP中文網的CSS視頻教程欄目進一步的學習！！！
以上就是CSS的white-space屬性怎么使用的詳細內容，更多請關注php中文網其它相關文章！
來源：php中文網