標籤：body red containe 處理 -- pre width 空白 技術分享
一、效果代碼：
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>white space空白符處理</title> <style type="text/css"> .head{ margin: 0 0 0 100px; } .container{ margin: 0 0 0 100px; } .container div{ width: 300px; height: 100px; margin: 0 0 20px 0; border: 1px solid red; } .d1{ white-space: normal; } .d2{ white-space: pre; } .d3{ white-space: nowrap; } .d4{ white-space: pre-line; } .d5{ white-space: pre-wrap; } .d6{ white-space: inherit; } </style></head><body> <div class="head"> <h1>white space 空白符處理</h1> <h2>首頁<a href="index.html"></a></h2> </div> <div class="container"> <h2>white-space: normal;</h2> <div class = ‘d1‘> Sunlike阿理WangWang Sunlike阿理WangWangSunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWangSunlike阿理WangWang </div> <h2> white-space: pre;</h2> <div class = ‘d2‘> Sunlike阿理WangWang Sunlike阿理WangWangSunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWangSunlike阿理WangWang </div> <h2>white-space: nowrap;</h2> <div class = ‘d3‘> Sunlike阿理WangWang Sunlike阿理WangWangSunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWangSunlike阿理WangWang </div> <h2>white-space: pre-line;</h2> <div class = ‘d4‘> Sunlike阿理WangWang Sunlike阿理WangWangSunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWangSunlike阿理WangWang </div> <h2> white-space: pre-wrap;</h2> <div class = ‘d5‘> Sunlike阿理WangWang Sunlike阿理WangWangSunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWangSunlike阿理WangWang </div> <h2>white-space: inherit;</h2> <div class = ‘d6‘> Sunlike阿理WangWang Sunlike阿理WangWangSunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWang Sunlike阿理WangWangSunlike阿理WangWang </div> </div></body></html>
效果1：
總結1：（圖解CSS3：預設值，空白處會被瀏覽器忽略）
效果2：
總結2：（圖解CSS3：文本空白處會被瀏覽器扣留，其行為方式類似HTML中的<pre>標籤效果）
效果3：
總結3：（圖解CSS3：空白符序列被瀏覽器忽略，文本不會換行，文本會在同一行上，直到遇到換行便簽</br>）
效果4：
總結4：（圖解CSS3：合并空白符序列，但保留分行符號）
效果5：
總結5：（圖解CSS3：保留空白符序列，但是進行正常的換行，此屬性值不支援IE7.0和firefox3.0一下的版本）
效果6：
總結6：（圖解CSS3：繼承父元素的white-space屬性值）
圖解CSS3----white-space空白符處理
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
