cari

Rumah  >  Artikel  >  hujung hadapan web  >  详解CSS中的空白效果属性使用

详解CSS中的空白效果属性使用

高洛峰
高洛峰asal
2017-03-08 15:26:511874semak imbas

white-space

white-space用来设置浏览器对“空白”的处理，所谓的空白指的是你在编辑器里面输入的空格，回车，tab等。他的可选内容如下：

normal： 默认。空白会被浏览器忽略。例如：开头结尾的空白忽略，字之间的，不管多少个多个空格或回车，只显示一个空格，换行前面的空格忽略
pre：空白会被浏览器保留。其行为方式类似 HTML 中的 e03b848252eb9375d56be284e690e873 标签。
nowrap：不换行，除非遇到df250b2156c434f3390392d09b1c9563，n个空格会被压缩为一个。
pre-wrap：保留所有空白，但是正常地进行换行（chrome，FF，IE8+，Opera），在IE6和IE7下等同于normal
pre-line：合并空白符序列（合并成一个），但是保留换行符（chrome，FF，IE8+，Opera），在IE6和IE7下面等同于normal

word-spacing与letter-spacing
word-spacing 只能作用于英文的单词与单词间，对于中文无效
letter-spacing 可以作用于中文。

<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>

Atas ialah kandungan terperinci 详解CSS中的空白效果属性使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：在CSS中Box Model盒模型中的边距图文详解Artikel seterusnya：css3 transform及原生js实现鼠标拖动3D立方体旋转的示例介绍

Artikel berkaitan

Lihat lagi