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,后者不会合并多余的空格,使用时按照需求使用即可。

相关推荐
吃杠碰小鸡21 小时前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone21 小时前
C#使用Aspose.Words把 word转成图片
前端·c#·word
xjt_090121 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农1 天前
Vue 2.3
前端·javascript·vue.js
夜郎king1 天前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
夏幻灵1 天前
HTML5里最常用的十大标签
前端·html·html5
Mr Xu_1 天前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js
未来龙皇小蓝1 天前
RBAC前端架构-01:项目初始化
前端·架构
程序员agions1 天前
2026年,微前端终于“死“了
前端·状态模式
万岳科技系统开发1 天前
食堂采购系统源码库存扣减算法与并发控制实现详解
java·前端·数据库·算法