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

相关推荐
发呆小天才yy9 分钟前
uniapp 微信小程序使用图表
前端·微信小程序·uni-app·echarts
@PHARAOH2 小时前
HOW - 在 Mac 上的 Chrome 浏览器中调试 Windows 场景下的前端页面
前端·chrome·macos
月月大王4 小时前
easyexcel导出动态写入标题和数据
java·服务器·前端
JC_You_Know4 小时前
多语言网站的 UX 陷阱与国际化实践陷阱清单
前端·ux
Python智慧行囊5 小时前
前端三大件---CSS
前端·css
Jinuss5 小时前
源码分析之Leaflet中Marker
前端·leaflet
成都渲染101云渲染66665 小时前
blender云渲染指南2025版
前端·javascript·网络·blender·maya
聆听+自律5 小时前
css实现渐变色圆角边框,背景色自定义
前端·javascript·css
牛马程序小猿猴6 小时前
17.thinkphp的分页功能
前端·数据库
huohuopro7 小时前
Vue3快速入门/Vue3基础速通
前端·javascript·vue.js·前端框架