首頁 > web前端 > css教學 > 詳解CSS中的空白效果屬性使用

詳解CSS中的空白效果屬性使用

高洛峰
發布: 2017-03-08 15:26:51
原創
1914 人瀏覽過

white-space

white-space用來設定瀏覽器對「空白」的處理,所謂的空白指的是你在編輯器裡面輸入的空格,回車,tab等。他的可選內容如下:

normal: 預設。空白會被瀏覽器忽略。例如:開頭結尾的空白忽略,字之間的,不管多少個多個空格或回車,只顯示一個空格,換行前面的空格忽略
pre:空白會被瀏覽器保留。其行為方式類似 HTML 中的

 標籤。 <br>nowrap:不換行,除非遇到<br />,n個空格會被壓縮成一個。 <br>pre-wrap:保留所有空白,但正常地進行換行(chrome,FF,IE8+,Opera),在IE6和IE7下等同於normal<br>pre-line:合併空白符序列(合併成一個) ,但保留換行符(chrome,FF,IE8+,Opera),在IE6和IE7下面等同於normal</p>
<p><strong>word-spacing與letter-spacing<br></strong>#word-spacing 只能作用於英文的字與字間,對於中文無效<br>letter-spacing 可以作用於中文。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><html>   
 <head>   
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>   
  <style type="text/css">   
   p.spread {letter-spacing: 30px;}   
  </style>   
 </head>   
 <body>   
  <p class="spread">This is some text.哈哈哈哈哈哈哈</p>   
  <p class="tight">This is some text.This is some text.</p>   
 </body>   
</html>
登入後複製

以上是詳解CSS中的空白效果屬性使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板