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

相关推荐
五点六六六1 天前
跨端RN 与 浏览器Web 的 长渲染性能 差异 与 底层 揭秘
前端·react native·webgl
咬人喵喵1 天前
18 类年终总结核心 SVG 交互方案拆解
前端·css·编辑器·交互·svg
不想秃头的程序员1 天前
JS继承方式详解
前端·面试
Mapmost1 天前
【高斯泼溅】从“看清”到“看懂”,3DGS语义化让数字孪生“会说话”
前端
指尖跳动的光1 天前
防止前端页面重复请求
前端·javascript
luquinn1 天前
用canvas切图展示及标记在原图片中的位置
开发语言·前端·javascript
巧克力芋泥包1 天前
前端vue3调取阿里的oss存储
前端
AAA阿giao1 天前
React Hooks 详解:从 useState 到 useEffect,彻底掌握函数组件的“灵魂”
前端·javascript·react.js
RedHeartWWW1 天前
Next.js Middleware 极简教程
前端
饼饼饼1 天前
从 0 到 1:前端 CI/CD 实战 ( 第一篇: 云服务器环境搭建)
运维·前端·自动化运维