FE_TA不知道的CSS 换行系列【1】white-space
在W3C官方描述中,white-space主要有以下两个作用:
- 是否进行空格合并,以及控制空格合并的方式;
- 是否在soft wrap opportunities(文本中可进行换行的断点位置)处进行文本换行。
从字面意思来看white-space即为空格,因此对于其第一个作用改变空格的表现形式大家都很容易理解,那为什么这个属性也会影响换行呢?
1 这里还是得回到soft wrap opportunities的定义
简单总结一下,当文本长度超出容器时,浏览器在单词边界、连字符、音节、标点符号、空格等地方都可以进行换行,这些点即是soft wrap opportunities。所以答案明了,空格是可以进行换行的地方,而white-space用来影响空格的表现,故white-space的第二个作用便是影响文本换行。这里也解释了为什么white-space、word-break、word-wrap等多个属性都可以改变文本的换行行为,它们改变的都是soft wrap opportunities,间接导致了换行的变化。
2 white-space能影响换行,也应该是在有空格的情况下,这里跟换行符\n有什么关系呢?
这就涉及到另一个重点了,在**浏览器渲染页面时,会把所有的换行符都渲染成空格!**浏览器渲染页面的根本是将HTML渲染成可见的内容,而在HTML中只有<br>标签用于换行,其他的换行符如\n、\r\n等只有在支持解析的语法中才会显示,如JavaScript的console。
在浏览器的渲染过程中,DOM解析完成后将与CSSOM进行合并,此时DOM树中文本里的换行符\n已经被转换成了空格,当发现CSSOM中对应属性有white-space时,该属性值发生作用,最终将渲染后的结果展示在页面中。


3 详细学习一下white-space的几个主要属性值
3.1 normal - 行框盒子
连续的空白符会被合并,换行符会被当作空白符来处理。换行在填充「行框盒子 (line boxes)」时是必要。该属性值为浏览器的默认样式,会将文本中的换行符转换为空白符,并且连续的空白符会进行合并。这里的「行框盒子」可以简单理解为当文本长度超过盒子宽度时会进行换行操作。
#app {white-space: normal;width: 100px;height: 50px;border: 1px solid black;}

3.2 nowrap
和 normal 一样,连续的空白符会被合并。但文本内的换行无效。该属性值用于控制文本不换行,但需要注意的是这里「文本内的换行」主要是指换行符\n,而换行标签<br>还是能够使文本换行的。
.box {white-space: nowrap;width: 100px;height: 50px;border: 1px solid black;margin-bottom: 10px;
}

3.3 pre
连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。该属性值会保留文本中连续的空白符,不进行合并操作,如果文本中没有换行符或者<br>标签则不会进行换行操作。
.box {white-space: pre;width: 100px;height: 50px;border: 1px solid black;margin-bottom: 10px;
}

3.4 pre-wrap
连续的空白符会被保留。在遇到换行符或者<br>元素,或者需要为了填充「行框盒子 (line boxes)」时才会换行。该属性值相比于pre会始终对文本进行换行操作。
.box {white-space: pre-wrap;width: 150px;height: 50px;border: 1px solid black;margin-bottom: 10px;
}

3.5 pre-line
连续的空白符会被合并。在遇到换行符或者<br>元素,或者需要为了填充「行框盒子 (line boxes)」时会换行。该属性值相比于pre-wrap会将连续的空白符进行合并。
.box {white-space: pre-line;width: 150px;height: 50px;border: 1px solid black;margin-bottom: 10px;
}

3.6 break-space
与 pre-wrap的行为相同,除了:
- 任何保留的空白序列总是占用空间,包括在行尾。
- 每个保留的空格字符后都存在换行机会,包括空格字符之间。
- 这样保留的空间占用空间而不会挂起,从而影响盒子的固有尺寸(最小内容大小和最大内容大小)。
这是一个很少见的属性值,在MDN中也没有很明确的示例。根据上面的描述,我们可以知道该属性值与pre-wrap相比差别主要是在文本行尾的空格。pre-wrap中文本行尾空格较多时,虽然会进行保留,但并不会进行换行操作,多余的空格会超出盒子。break-spaces中文本行尾空格则会进行换行操作。额外需要注意的是该属性值存在兼容性问题,在 Internet Explorer 和 Firefox for Android 中无法生效。
.box {width: 150px;border: 1px solid black;margin-bottom: 10px;
}.box1 {white-space: pre-wrap;
}.box2 {white-space: break-spaces;
}

4 总结

相关文章:
FE_TA不知道的CSS 换行系列【1】white-space
在W3C官方描述中,white-space主要有以下两个作用: 是否进行空格合并,以及控制空格合并的方式;是否在soft wrap opportunities(文本中可进行换行的断点位置)处进行文本换行。 从字面意思来看white-space即…...
matlab中计算标准差std函数
标准差 标准差(Standard Deviation)是离均差平方的算术平均数(即:方差)的算术平方根。 标准差是方差的算术平方根。标准差能反映一个数据集的离散程度。平均数相同的两组数据,标准差未必相同。 计算公式&…...
【操作系统】原语操作详解
基本概念 "原语"一词源于英文 “primitive” 或 “instruction”,意为 “原始的” 或 “基本的指令”。在计算机科学中,原语是一种基本的操作,它是不可分割的,要么全部执行成功,要么全部执行失败࿰…...
mongDB的相关查询插入操作
db.getCollection(“ProductBuriedPointPo”).find();–查询 db.getCollection(“ProductBuriedPointPo”).remove({“_id”: ObjectId(“61e8f4c3bdc4381042acd296”)})–删除 db.getCollection(“ProductBuriedPointPo”).insert( { _id: ObjectId(“61e8f4c3bdc4381042acd2…...
【C++初阶】C++入门(二):引用内联函数auto关键字范围for循环(C++11)指针空值nullptr
📝个人主页:Sherry的成长之路 🏠学习社区:Sherry的成长之路(个人社区) 📖专栏链接:C初阶 🎯长路漫漫浩浩,万事皆有期待 上一篇博客:【C初阶】…...
地下污水厂智能照明控制应用
摘要:结合某地下污水厂项目,从结构、系统组成、系统功能、控制要求、场景模式等方面介绍了地下污水厂智能照明控制系统,探索了一套适用于地下污水厂的智能照明控制策略,以确保地下污水厂正常运行的照明需求。 关键词:智能照明控制系统;地下污…...
IS220UCSAH1A利用电子和空穴两种载流子导电的,所以叫做双极型电路
IS220UCSAH1A利用电子和空穴两种载流子导电的,所以叫做双极型电路 美国的通用电气公司(General Electric Company,以下简称 GE)想要称霸整个工业互联网,但却失败了。为什么呢? 多年来,GE 一直在…...
干货|英国专利申请
英国是世界上公认的一个实施现代专利制度的国家。英国1624年颁布的《垄断法案》被认为是世界上一部具有现代意义的专利法,并成为现代专利保护制度系的起点。英国现行的专利法于1977年颁布,并于1978年生效。英国的专利制度在保护发明创造,促进…...
springboot文件上传
1.新建文件上传页面 在static目录中新建upload-test.html,上传页面代码如下所示: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>springboot文件上传测试</title> <…...
天龙八部手游服务端架设搭建教程
天龙八部手游服务端架设搭建教程 大家好,我是艾西。最近更新游戏搭建教程比较少也被不少小伙伴催更,今天我和大家聊聊天龙八部手游服务端架设搭建。 游戏讲述元佑元年,大宋遭受辽国入侵的故事,玩家可扮演峨眉、丐帮、天山、逍遥、…...
Windows 服务监控工具
在任何企业中,Windows 服务都是面向业务的应用程序的核心组件。这些 Windows 服务的有效运行对于防止网络和应用程序停机至关重要。这使得 Windows 服务监视成为任何网络管理策略的关键部分。 Windows 服务监视使管理员能够确保关键 Windows 服务的可用性ÿ…...
零基础抽象轻松MYSQL
不断学习,不断进步,才能不被替代 只有不被替代才是价值所在 ————2023年4月20日 目录 数据类型 数值型 数据类型 第一类:数值型 第二类:字符型 第三类:JSON第四类:时间日期型 数据类型中共分成了四大类…...
区块链赛项样题解析
文章目录 前言一、区块链产品方案设计及系统运维(预计2小时)1. 业务架构(Visio),需求分析、设计(doc)2. 区块链系统部署、测试搭建:(根据题目要求选择)测试:(根据题目要求选择&#…...
基于Java+SpringBoot+vue+element疫情药品采购出入库系统设计实现
基于JavaSpringBootvueelement疫情药品采购出入库系统设计实现 博主介绍:5年java开发经验,专注Java开发、定制、远程、指导等,csdn特邀作者、专注于Java技术领域 作者主页 超级帅帅吴 Java项目精品实战案例《500套》 欢迎点赞 收藏 ⭐留言 文末获取源码联…...
【C++】5. 引用
文章目录 前言一、引用1.1 理解引用1.2 引用的特性1.3 引用的权限1.4 引用的使用场景1.4.1 做参数1.4.2 做返回值 1.5 引用的本质 前言 C语言中什么最难学?那当然就是指针了。不但使用起来麻烦,时不时还会产生一些意料之外的错误。C提供了一种方式&…...
初识C++(二)
在初识c(一)当中我们已经向大家介绍了四个c和C语言不同的使用方法。接下来我们再来向大家介绍另外的一些新的c语言的使用方法。 🌵引用 简单一点来说引用就是给已存在的变量起一个别名。这个别名通常的作用和C语言当中的指针类似。我们可以通…...
编译时报Clang SA is not enabled问题解决
报此问题应该是swap不足导致的,原因是用的虚拟机,改为16G内存问题排除 具体解决如下: 1.free -h 查看当前分区大小和使用情况 2.扩展分区大小 2.1首先删除系统默认分区 sudo swapoff /swapfile sudo rm /swapfile 2.2新建swap分区…...
【论文阅读】You Are What You Do:通过数据来源分析寻找隐蔽的恶意软件
You Are What You Do: Hunting Stealthy Malware via Data Provenance Analysis NDSS-2020 伊利诺伊大学香槟分校、德克萨斯大学达拉斯分校 Wang Q, Hassan W U, Li D, et al. You Are What You Do: Hunting Stealthy Malware via Data Provenance Analysis[C]//NDSS. 2020. 目…...
c#期末复习题重点难点题
2. (单选题, 9分)在.NET中,.NET Framework由( )组成。 A. FCL和CLR -开发库和运行环境B. ADO.NETASP.NET -数据操作和web框架C. CLS和CTS -语法规范和类型规范 即所有语言和语法规范 和 各语言间的类型互操作性规范D. Winform和ASP.NET…...
Sass @mixin 与 @include
Sass mixin 与 include mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。 include 指令可以将混入(mixin)引入到文档中。 定义一个混入 混入(mixin)通过 mixin 指令来定义。 mixin name { property: value; property: value; ... } 以…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
ffmpeg(四):滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具,可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下: ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜: ffmpeg…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程:首先由HR先筛选一部分简历后,在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如:Boss直聘(招聘方平台) 直接按照条件进行筛选 例如:…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...
JS设计模式(4):观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中,我们经常会遇到这样的场景:一个对象的状态变化需要自动通知其他对象,比如: 电商平台中,商品库存变化时需要通知所有订阅该商品的用户;新闻网站中࿰…...
【Linux】Linux 系统默认的目录及作用说明
博主介绍:✌全网粉丝23W,CSDN博客专家、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围:SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...
腾讯云V3签名
想要接入腾讯云的Api,必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口,但总是卡在签名这一步,最后放弃选择SDK,这次终于自己代码实现。 可能腾讯云翻新了接口文档,现在阅读起来,清晰了很多&…...
