CSS 使用white-space属性换行

一、white-space属性的常见值

* 原本格式:

1、white-space:normal

默认值,空格和换行符会被忽略过滤掉;宽度不够时文本会自动换行

* 宽度足够时,normal 处理后的格式

* 宽度不够时, normal 处理后的格式

2、white-space:nowrap

空格和换行符会被忽略过滤掉;宽度不够时不会自动换行

不会因为容器的大小自动换行,除非遇到<br>换行符

* 宽度足够时,nowrap 处理后的格式

* 宽度不够时,nowrap 处理后的格式

3、white-space:pre

同<pre>标签,空格和换行符会被保留显示,就算宽度不够时,格式也会按照原格式原样显示

* 宽度足够时,pre 处理后的格式

* 宽度不够时,pre 处理后的格式

4、white-space:pre-wrap

空格和换行符会被保留显示,当内容超出容器时自动换行

* 宽度足够时,pre 处理后的格式

* 宽度不够时,pre 处理后的格式

5、white-space:pre-line

保留显示换行符,多个连续的空格会被合并为一个空格显示;

适用于显示换行符,但是不想显示过多冗余的空格的场景;

注意:行首的空格并未显示

* 宽度足够时,pre-line处理后的格式

* 宽度足够时,pre-line处理后的格式

6、white-space:break-spaces

二、小结

1、white-space:normal和white-space:nowrap

空格和换行符会被忽略过滤掉;宽度不够时,前者文本会自动换行,后者不会自动换行

**2、**white-space:pre和white-space:pre-wrap

空格和换行符会被保留显示,宽度不够时,前者文本不会自动换行,后者会自动换行

3、 pre-line相比pre-wrap,后者不会合并多余的空格,使用时按照需求使用即可。

相关推荐
GreenTea4 分钟前
一文搞懂Harness Engineering与Meta-Harness
前端·人工智能·后端
killerbasd2 小时前
牧苏苏传 我不装了 4/7
前端·javascript·vue.js
吴声子夜歌2 小时前
ES6——二进制数组详解
前端·ecmascript·es6
码事漫谈2 小时前
手把手带你部署本地模型,让你Token自由(小白专属)
前端·后端
ZC跨境爬虫2 小时前
【爬虫实战对比】Requests vs Scrapy 笔趣阁小说爬虫,从单线程到高效并发的全方位升级
前端·爬虫·scrapy·html
爱上好庆祝2 小时前
svg图片
前端·css·学习·html·css3
王夏奇3 小时前
python中的__all__ 具体用法
java·前端·python
大家的林语冰3 小时前
《前端周刊》尤大开源 Vite+ 全家桶,前端工业革命启动;尤大爆料 Void 云服务新产品,Vite 进军全栈开发;ECMA 源码映射规范......
前端·javascript·vue.js
jiayong234 小时前
第 8 课:开始引入组合式函数
前端·javascript·学习
田八4 小时前
聊聊AI的发展史,AI的爆发并不是偶然
前端·人工智能·程序员