对CSS white-space 属性的总结

http://www.w3school.com.cn/cssref/pr_text_white-space.asp

对于块级元素,如div(width:100px;border: 1px solid #000;)使用white-space总结:

1.编辑器里div1如下:                             

                                图-1

浏览器效果:,

由此得出:编辑器内的代码换行及行首尾空格经过浏览器解析后已被合并,且内容自动换行;

2.编辑器里div2,见图-1 : 

浏览器效果:,

由此得出:编辑器内的代码换行及行首尾空格不会被合并,且内容不会自动换行;

3.编辑器里div3,见图-1

浏览器效果:,

由此得出:编辑器内的代码换行及行首尾空格全部被合并,且内容不自动换行;

4.编辑器里div4,见图-1:

浏览器效果:,

由此得出:编辑器内的代码换行及行首尾空格不会被合并,且内容自动换行了

5.编辑器里div5,见图-1,

浏览器效果:,

由此得出:编辑器内的代码换行没有合并,但是行首尾空格被合并,且内容自动换行了

6.编辑器里div6,见图-1,

浏览器效果:

由于浏览器默认white-space:normal,可以通过其父类改变white-space如以上5个属性值,效果见上.

块级元素如div的white-space使用技巧:

1.合并换行和行首尾空白且自动换行,使用normal;

2.合并换行和行首尾空白且不自动换行,使用nowrap;

3.不合并换行和行首尾空白且自动换行,使用pre-wrap;

4.不合并换行和行首尾空白且不自动换行,使用pre;

5.不合并换行,但合并行首尾空白,且自动换行,使用pre-line;

补充:

行内元素如span的white-space使用技巧:

1.使用所有属性值内容不会自动换行,因为给行内元素设置width没有作用;

2.使用normal、nowrap,则换行和行首尾空白合并;

3.使用pre、pre-wrap,则不合并换行和行首尾空白;

4.使用pre-line,则不合并换行,但会合并行首尾空白;

注意:以上结论是针对于有多行内容的情况及使用white-space属性时,才会看到明显效果!!!