深入理解CSS中的空白符和换行 - 小火柴的蓝色理想

×

目录

[1]white-space [2]word-wrap [3]word-break

前面的话

　　CSS3新增了两个换行属性word-wrap和word-break。把空白符和换行放在一起说，是因为实际上空白符是包括换行的，且常用的文本不换行是使用的空白符的属性white-space: nowrap;但到底它们还有些什么属性值，以及有什么对应的用法。本文将就空白符和换行的内容做详细介绍和梳理

 

空白符

定义

　　空白符是指空格、制表符和回车；HTML默认已经把所有空白符合并成一个空格。

white-space

　　值: normal | nowrap | pre | pre-wrap | pre-line | inherit

　　初始值: normal

　　应用于: 所有元素

　　继承性: 有

<span style="color: #000000;">normal: 合并空白符，允许自动换行
nowrap: 合并空白符，不允许自动换行
pre</span>-<span style="color: #000000;">line: 合并空白符(不包括换行符)，允许自动换行
pre: 不合并空白符，不允许自动换行
pre</span>-wrap: 不合并空白符，允许自动换行 

　　[注意]

元素默认带有样式white-space: pre;
<p>　　[注意]IE7-浏览器不支持pre-line和pre-wrap这两个属性值</p>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #000000;">They can stay 72-hours 
    within the Shandong      province after they have entered China via the Qingdao International Airport.</span><span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>