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