FE_TA不知道的CSS 换行系列【1】white-space

news2024/11/13 19:40:39

在W3C官方描述中,white-space主要有以下两个作用:

  1. 是否进行空格合并,以及控制空格合并的方式;
  2. 是否在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的行为相同,除了:

  1. 任何保留的空白序列总是占用空间,包括在行尾。
  2. 每个保留的空格字符后都存在换行机会,包括空格字符之间。
  3. 这样保留的空间占用空间而不会挂起,从而影响盒子的固有尺寸(最小内容大小和最大内容大小)。

这是一个很少见的属性值,在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 总结

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/456597.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

从github下载项目并进行环境配置

文章目录 1 设置虚拟环境2 git clone 链接地址3 环境配置 1 设置虚拟环境 利用pycharm打开项目&#xff1a;File->Open配置对应的虚拟环境&#xff1a;File->Setting->Project->Python解释器&#xff0c;然后选择对应的虚拟环境如果没有提前设置虚拟环境&#xf…

私人工具集6——使用C# 创建一个简单的restful风格的WebAPI

创建一个简单的WebApi 工具&#xff1a;VS2022 创建新项目 打开VS2022,创建新项目&#xff0c;可以搜索API作为关键字。 为项目取个名字 创建的应用程序&#xff0c;选择WebAPI&#xff0c;注意&#xff0c;右侧的信息默认即可&#xff0c;不要随意选择。 点击创建&#xff…

高可用消息服务消息一致、可靠性、链路稳定性核心关注点

面临的问题 初期业务主要的场景是直播间的群聊消息以及一小部分的单聊消息。由于是教育场景&#xff0c;所以业务在划分聊天室的时候是以班级为单位进行划分的&#xff0c;假设每个聊天室的人数为500人。 问题一&#xff1a;用户的维护 直播场景的群聊与微信等常见的群聊在用…

可视化大屏模板|不玩虚的,套用立得报表

写在前面&#xff1a;这是报表&#xff0c;是可视化大屏报表&#xff0c;是可以直接套用来分析我们自己数据源的可视化大屏报表模板。不是单纯的图片&#xff01; 在一些社交平台上经常看到有人误将可视化大屏图片当做报表求分享。可以理解大家都想要将报表做得好看&#xff0…

信息收集(三)端口和目录信息收集

信息收集&#xff08;一&#xff09;域名信息收集 信息收集&#xff08;二&#xff09;IP信息收集 端口是什么 "端口"是英文port的意译&#xff0c;可以认为是设备与外界通讯交流的出口。端口可分为虚拟端口和物理端口&#xff0c;其中虚拟端口指计算机内部或交换机…

Matlab绘图中的一些技能

目录 1、matlab坐标轴设置多种字体(复合字体) 2、matlab图片中title生成的标题转移至图像下端 3、指定对应格式和期望dpi的图像进行保存、以及不留白保存 4、设置字体字号&#xff08;x、y轴&#xff0c;标题。全局字体等&#xff09; 5、设置刻度值信息&#xff0c;只有左…

ConcurrentHashMap是如何保证线程安全的

ConcurrentHashMap是如何保证线程安全的 定义和问题解决JDK 1.7实现原理JDK 1.8性能优化总结 定义和问题解决 ConcurrentHashMap相当于HashMap的多线程版本。 它的功能本质上和HashMap没有什么区别&#xff0c;因为HashMap在并发操作的时候会出现各种问题&#xff0c;比如&am…

Android混淆和反混淆

本篇来介绍下Android的混淆和反混淆&#xff0c;说起混淆&#xff0c;大家都会很自然地想到ProGuard&#xff0c;此外还有R8。事实上&#xff0c;AGP3.3之后&#xff0c;官方默认使用R8做代码优化、混淆和压缩。ProGuard和R8常常用于混淆最终的Android项目&#xff0c;增加项目…

Vue-router【VUE】

6. vue-router 6.1 相关理解 6.1.1 vue-router 的理解 路由就是一组key-value的对应关系。多个路由&#xff0c;需要经过路由器的管理vue是一个插件库&#xff0c;专门用来实现SPA应用。 6.1.2 对SPA应用的理解 单页 Web 应用&#xff08;single page web application, SP…

C++基础阶段入门 (1)

1.C统一初始化: 初始化列表解决方案&#xff1a; //C语言的初始化方案 int main() {int a 10;int* ip nullptr;int ar[] { 12,23,34,45,56,67 }; } C 初始化&#xff1a;使用{ } int main(){//char ch a;char ch{ a };//int a 10;int a{ 10 };int b int(10);int x{ 10…

企业软文怎么写吸引人?教你几招

企业每年都要投放大量的商业软文到热门的内容平台上&#xff0c;也许现在你阅读的某篇文章&#xff0c;就是一篇企业软文。 真正厉害的软文在于你根本看不出来这是一条广告&#xff0c;从而让你心甘情愿的为某个产品掏腰包。企业软文到底怎么写才吸引人&#xff0c;接下来伯乐…

sfavsrv导致主机负载高

下午接客户电话&#xff0c;监控告警了&#xff0c;主机负载高&#xff0c;登录后top查看&#xff0c;确实比较的高 再次查看负载高的cpu发现是sfavsrv 吓了一跳&#xff0c;还以为中毒了&#xff0c;发给客户检查是否自行部署了第3方软件&#xff0c;确实第3方的&#xff0c;关…

如何将pdf图片文字转换成word 文字word图片怎么转换pdf

如今大家在工作中常常会运用到电脑来办公&#xff0c;电脑的运用大大提高了我们的工作效率&#xff0c;在带来机会的同时同样也带来了新挑战。 pdf图片怎么转换成word文档&#xff1f;PDF格式是一种常用的文档格式&#xff0c;它可以保持文档内容和格式的完整性&#xff0c;但是…

4月有8本SCIE期刊被剔除(附MDPI/Frontiers/Hindawi最新在检期刊)

2023年4月SCI、SSCI期刊目录更新 2023年4月18日&#xff0c;科睿唯安更新了WOS期刊目录&#xff0c;继上次3月WOS期刊目录剔除50本SCIE&SSCI期刊之后&#xff0c;此次4月更新又有8本SCIE期刊发生变动&#xff0c;其中有4本期刊被踢出SCIE数据库&#xff0c;4本期刊更改了名…

QMS-云质说质量 - 2 你真的知道什么是质量吗

云质QMS原创 转载请注明来源 作者&#xff1a;王洪石 引言 暴露的只是冰山一角 注&#xff1a;&#xff08;&#xff09;中为ISO9000:2015 质量管理体系基础和术语的编号 一个组织的质量管理(3.3.4)&#xff0c;可包括制定质量方针(3.5.9)和质量目标(3.7.2)&#xff0c;以及通…

Web 攻防之业务安全:接口未授权访问/调用测试(敏感信息泄露)

Web 攻防之业务安全&#xff1a;接口未授权访问/调用测试 业务安全是指保护业务系统免受安全威胁的措施或手段。广义的业务安全应包括业务运行的软硬件平台&#xff08;操作系统、数据库&#xff0c;中间件等&#xff09;、业务系统自身&#xff08;软件或设备&#xff09;、业…

火车站闸机web3d数字展示平台全方位动态呈现设备细节

智能互联网时代&#xff0c;传统的图片、文字、视频等产品展示方式&#xff0c;因为缺少互动性&#xff0c;很难引起用户的兴趣&#xff0c;已经逐渐失去了宣传优势。 Web3D交互展示技术的出现&#xff0c;让众多品牌和企业找到了新的方向&#xff0c;线上产品展示不在枯燥无趣…

少儿编程 中国电子学会图形化编程等级考试Scratch编程一级真题解析(选择题)2023年3月

2023年3月scratch编程等级考试一级真题 选择题&#xff08;共25题&#xff0c;每题2分&#xff0c;共50分&#xff09; 1、下列说法不正确的是 A、可以从声音库中随机导入声音 B、可以录制自己的声音上传 C、可以修改声音的大小 D、不能修改声音的速度 答案&#xff1a;D…

计算机网络第1章(概述)

文章目录 1.1、计算机网络在信息时代的作用1.2、因特网概述1、网络、互连网&#xff08;互联网&#xff09;和因特网2、因特网发展的三个阶段3、因特网的标准化工作4、因特网的组成 1.3 三种交换方式1、电路交换&#xff08;Circuit Switching&#xff09;2、分组交换&#xff…

Composer使用教程

Composer使用教程 前言1.Composer 简介2. 下载与安装2.1 局部安装2.2 全局安装2.3 更新composer2.4查看composer2.5 安装composer镜像加速 3. composer的使用3.1初始化3.2安装第三方包 4. 自动加载器4.1 加载非 class 文件4.2 加载自己写 class 文件4.3 PSR-4 自动加载规范 5. …