对CSS white-space 属性的总结

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cheer_up_cs/article/details/79975617

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属性时,才会看到明显效果!!!


阅读更多

没有更多推荐了,返回首页