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

相关推荐
云水一下33 分钟前
CSS3从零基础到精通(一):前世今生与基础入门
前端·css3
顾凌陵36 分钟前
CSRF&SSRF漏洞攻击的溯源分析与实战
前端·csrf
月月大王的3D日记38 分钟前
Three.js 材质篇(中):从兰伯特到PBR,一篇文章看懂五种光照材质
前端·javascript
且白39 分钟前
leaflet切片变色、地图滤镜逻辑实现 colorfilter
前端·javascript
用户8876654266343 分钟前
Linux 终端入门:新手必须掌握的常用命令和基本思路
前端·操作系统
用户125758524361 小时前
Vue3 后台框架的网络请求怎么设计?看 XYGo Admin 三套 Axios 实例与拦截器方案
前端
ZengLiangYi1 小时前
多格式文件解析:JSONL / SQLite / Event Stream
前端·javascript·后端
边界条件╝1 小时前
微前端进阶(一)
前端
ZC跨境爬虫1 小时前
跟着 MDN 学CSS day_34:(CSS 布局全面解析)
前端·css·ui·html·tensorflow
万少1 小时前
湖南卫视的秘密武器曝光!芒果灵创,专业AI影视创作平台
前端·javascript·后端