css white-space属性总结

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

1、normal值

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

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

HTML:

<div>
  我立志成为一个               很牛逼的高级前端开发者。
</div>

CSS:

div{
  width:200px;
  line-height:30px;
  border:1px solid #444;
  padding:10px;
  white-space:normal;
}

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保留空格但溢出不换行。它的作用是保持源码中的空格，有几个空格算几个空格显示，同时换行只认源码中的换行和<br/>标签。其行为方式类似 HTML 中的 <pre> 标签。

HTML:

<div>
  我立志成为一个               很牛逼的<br>高级前端开
  发者。
</div>

CSS:

div{
  width:200px;
  line-height:30px;
  border:1px solid #444;
  padding:10px;
  white-space:pre;
}

4、pre-wrap值

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

 5.pre-line值

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

white-space属性值表

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

 

最近开了个公众号用于推送前端学习总结，有兴趣的可以关注一下