对CSS white-space 属性的总结

原创 2018年04月17日 16:29:21

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


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

CSS强制不换行(white-space:nowrap)IE使用问题

什么情况下会出现换行:当元素设置了固定高度,并且文本长度大于标签元素的宽度时,文本会自动换行。css强制换行使用样式:white-space:nowrap;该样式从效果上是没有浏览器差异,使用该样式后...
  • JeamKing
  • JeamKing
  • 2010-05-12 14:13:00
  • 6087

ie7下使用white-space:nowrap时padding-right失效问题记录

chrome下效果: ie7下效果:
  • u013053949
  • u013053949
  • 2016-03-15 14:28:52
  • 388

CSS white-space normal nowrap强制同一行内显示所有文本不换行

1.多用于标题的字数很多 ,但不想换行 为了隐藏超出的部分 就用overflow:hidden样式。 1、white-space语法: white-space : normal nowrap 2、...
  • zengyonglan
  • zengyonglan
  • 2016-10-12 16:31:32
  • 1916

css排版之word-wrap word-break white-space 用法浅析

word-wrap word-break white-space 用法浅析 我们在对文字排版时有时候会需遇到文字比较多的情况,文字比较多时我们还可能会考虑到文字如何展示,今天我们主要说说文字遇到边界...
  • qq_25292481
  • qq_25292481
  • 2016-10-07 18:30:04
  • 1505

css white-space属性详解

white-space空格处理 css white-space这个css样式,用来设置element元素对内容中的空格的处理方式,有着几个可选值:normal,nowrap,pre,pre-wr...
  • qq_33706382
  • qq_33706382
  • 2017-10-24 12:20:51
  • 308

CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程

语法:    text-overflow : clip | ellipsis    参数:    clip :  不显示省略标记(...),而是简单的裁切   (clip这个参数是不常用的...
  • ebw123
  • ebw123
  • 2013-12-22 10:49:39
  • 35886

CSS vertical-align属性的用法

这两天写个页面css的时候用到了vertical-align属性,使用过程中踩到了坑,所以总结如下: vertical-align的定义 W3C上对vertical-align的定义:vertic...
  • u011263845
  • u011263845
  • 2015-07-12 16:26:47
  • 1311

css超出一行添加省略号属性:text-overflow和white-space

通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下html代码: 前端开发博客专注前端开发和技术分享,如果描述超过100像素,则会隐藏,添加...
  • kimliu2009
  • kimliu2009
  • 2016-11-07 12:04:53
  • 363

善用width:auto以及white-space:nowrap以防止布局被打破

这两张图分别是CSDN博客和饿了么的网页布局,在一般情况下,他们的布局应该是正常的,但是在这里却出现了不应该有的布局混乱。原因是可知的:笔者的电脑使用了MacType以及浏览器插件,对浏览器字体以及渲...
  • qiujiawen001
  • qiujiawen001
  • 2015-03-03 11:58:02
  • 773

white-space 属性设置如何处理元素内的空白。

定义和用法white-space 属性设置如何处理元素内的空白。这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。默认值: n...
  • forest_fire
  • forest_fire
  • 2016-03-21 10:54:00
  • 1251
收藏助手
不良信息举报
您举报文章:对CSS white-space 属性的总结
举报原因:
原因补充:

(最多只允许输入30个字)