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;