css中white-space属性

定义和用法

1.white-space 属性设置element元素对内容中的空格的处理方式。

2.没有设置white-space属性，则默认为white-space:normal。

3.JavaScript语法：object.style.whiteSpace="pre"

枚举

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

值	描述
normal	默认。合并空格，多个相邻空格合并成一个空格，在源码中的换行作为空格处理，只会根据容器的大小进行自动换行。
pre	保持源码中的空格，有几个空格算几个空格显示，同时换行只认源码中的换行和<br/>标签，不会去自适应容器换行。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	nowrap和normal一样，也合并空格，但是不会根据容器大小换行，表示不换行。文本会在在同一行上继续，直到遇到 <br/> 标签为止。经常和overflow,text-overflow一起使用让文本内容省略显示
pre-wrap	保留空格，并且除了碰到源码中的换行和<br/>会换行外，还会自适应容器的边界进行换行。
pre-line	合并空格，换行和pre-wrap一样，遇到源码中的换行和<br/>会换行，碰到容器的边界也会换行。
inherit	规定应该从父元素继承 white-space 属性的值。

 

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

实际应用

1.文本内容省略显示

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 250px;

2.通过innerHtml的方式显示页面时，文字可以通过/r/n换行符来换行显示

white-space: pre-line;