css white-space属性总结

white-space 属性用于设置如何处理元素内的空白。它有几个可选值:normal,nowrap,pre,pre-wrap,pre-line,默认情况下,white-space的值是normal。

1、normal值

normal表示合并空格,即多个相邻空格合并成一个空格,并且在源码中的换行也当空格处理,只会根据文本所在容器的大小进行换行。

这里的空白是值空白字符,包括空格,制表符等空白字符,下面为了行文方便,统一用“空格”代表。

HTML:

我立志成为一个 很牛逼的高级前端开发者。
CSS: div{ width:200px; line-height:30px; border:1px solid #444; padding:10px; white-space:normal; }

css white-space属性总结_第1张图片

2、nowrap值

nowrap和normal一样会对空格进行合并,但是不会根据容器大小换行,其表示不换行。

white-space:nowrap会导致文本不换行,经常和overflow,text-overflow一起使用,如下:

div{
  width:200px;
  line-height:30px;
  border:1px solid #444;
  padding:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

设置溢出不换行,隐藏溢出的,并添加省略号。

3、pre值

pre保留空格但溢出不换行。它的作用是保持源码中的空格,有几个空格算几个空格显示,同时换行只认源码中的换行和
标签。其行为方式类似 HTML 中的

 标签。

HTML:

我立志成为一个 很牛逼的
高级前端开 发者。
CSS: div{ width:200px; line-height:30px; border:1px solid #444; padding:10px; white-space:pre; }

css white-space属性总结_第2张图片

4、pre-wrap值

pre-wrap作用是保留空格,并且除了碰到源码中的换行和
会换行外,还会自适应容器的边界进行换行。

css white-space属性总结_第3张图片

 5.pre-line值

pre-line的作用是合并空格,换行和white-space:pre-wrap一样,遇到源码中的换行和
会换行,碰到容器的边界也会换行。

css white-space属性总结_第4张图片

white-space属性值表

white-space属性 源码空格 源码换行
换行
容器边界换行
normal 合并 忽略 换行 换行
nowrap 合并 忽略 换行 不换行
pre 保留 换行 换行 不换行
pre-wrap 保留 换行 换行 换行
pre-line 合并 换行 换行 换行

你可能感兴趣的:(CSS)