当前位置: 首页 > news >正文

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

在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 总结

在这里插入图片描述

相关文章:

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

在W3C官方描述中&#xff0c;white-space主要有以下两个作用&#xff1a; 是否进行空格合并&#xff0c;以及控制空格合并的方式&#xff1b;是否在soft wrap opportunities&#xff08;文本中可进行换行的断点位置&#xff09;处进行文本换行。 从字面意思来看white-space即…...

matlab中计算标准差std函数

标准差 标准差&#xff08;Standard Deviation&#xff09;是离均差平方的算术平均数&#xff08;即&#xff1a;方差&#xff09;的算术平方根。 标准差是方差的算术平方根。标准差能反映一个数据集的离散程度。平均数相同的两组数据&#xff0c;标准差未必相同。 计算公式&…...

【操作系统】原语操作详解

基本概念 "原语"一词源于英文 “primitive” 或 “instruction”&#xff0c;意为 “原始的” 或 “基本的指令”。在计算机科学中&#xff0c;原语是一种基本的操作&#xff0c;它是不可分割的&#xff0c;要么全部执行成功&#xff0c;要么全部执行失败&#xff0…...

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

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;C初阶 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 上一篇博客&#xff1a;【C初阶】…...

地下污水厂智能照明控制应用

摘要:结合某地下污水厂项目&#xff0c;从结构、系统组成、系统功能、控制要求、场景模式等方面介绍了地下污水厂智能照明控制系统&#xff0c;探索了一套适用于地下污水厂的智能照明控制策略&#xff0c;以确保地下污水厂正常运行的照明需求。 关键词:智能照明控制系统;地下污…...

IS220UCSAH1A利用电子和空穴两种载流子导电的,所以叫做双极型电路

IS220UCSAH1A利用电子和空穴两种载流子导电的&#xff0c;所以叫做双极型电路 美国的通用电气公司&#xff08;General Electric Company&#xff0c;以下简称 GE&#xff09;想要称霸整个工业互联网&#xff0c;但却失败了。为什么呢&#xff1f; 多年来&#xff0c;GE 一直在…...

干货|英国专利申请

英国是世界上公认的一个实施现代专利制度的国家。英国1624年颁布的《垄断法案》被认为是世界上一部具有现代意义的专利法&#xff0c;并成为现代专利保护制度系的起点。英国现行的专利法于1977年颁布&#xff0c;并于1978年生效。英国的专利制度在保护发明创造&#xff0c;促进…...

springboot文件上传

1.新建文件上传页面 在static目录中新建upload-test.html&#xff0c;上传页面代码如下所示&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>springboot文件上传测试</title> <…...

天龙八部手游服务端架设搭建教程

天龙八部手游服务端架设搭建教程 大家好&#xff0c;我是艾西。最近更新游戏搭建教程比较少也被不少小伙伴催更&#xff0c;今天我和大家聊聊天龙八部手游服务端架设搭建。 游戏讲述元佑元年&#xff0c;大宋遭受辽国入侵的故事&#xff0c;玩家可扮演峨眉、丐帮、天山、逍遥、…...

Windows 服务监控工具

在任何企业中&#xff0c;Windows 服务都是面向业务的应用程序的核心组件。这些 Windows 服务的有效运行对于防止网络和应用程序停机至关重要。这使得 Windows 服务监视成为任何网络管理策略的关键部分。 Windows 服务监视使管理员能够确保关键 Windows 服务的可用性&#xff…...

零基础抽象轻松MYSQL

不断学习&#xff0c;不断进步&#xff0c;才能不被替代 只有不被替代才是价值所在 ————2023年4月20日 目录 数据类型 数值型 数据类型 第一类&#xff1a;数值型 第二类&#xff1a;字符型 第三类&#xff1a;JSON第四类&#xff1a;时间日期型 数据类型中共分成了四大类…...

区块链赛项样题解析

文章目录 前言一、区块链产品方案设计及系统运维&#xff08;预计2小时&#xff09;1. 业务架构(Visio)&#xff0c;需求分析、设计(doc)2. 区块链系统部署、测试搭建&#xff1a;&#xff08;根据题目要求选择&#xff09;测试&#xff1a;&#xff08;根据题目要求选择&#…...

基于Java+SpringBoot+vue+element疫情药品采购出入库系统设计实现

基于JavaSpringBootvueelement疫情药品采购出入库系统设计实现 博主介绍&#xff1a;5年java开发经验&#xff0c;专注Java开发、定制、远程、指导等,csdn特邀作者、专注于Java技术领域 作者主页 超级帅帅吴 Java项目精品实战案例《500套》 欢迎点赞 收藏 ⭐留言 文末获取源码联…...

【C++】5. 引用

文章目录 前言一、引用1.1 理解引用1.2 引用的特性1.3 引用的权限1.4 引用的使用场景1.4.1 做参数1.4.2 做返回值 1.5 引用的本质 前言 C语言中什么最难学&#xff1f;那当然就是指针了。不但使用起来麻烦&#xff0c;时不时还会产生一些意料之外的错误。C提供了一种方式&…...

初识C++(二)

在初识c&#xff08;一&#xff09;当中我们已经向大家介绍了四个c和C语言不同的使用方法。接下来我们再来向大家介绍另外的一些新的c语言的使用方法。 &#x1f335;引用 简单一点来说引用就是给已存在的变量起一个别名。这个别名通常的作用和C语言当中的指针类似。我们可以通…...

编译时报Clang SA is not enabled问题解决

报此问题应该是swap不足导致的&#xff0c;原因是用的虚拟机&#xff0c;改为16G内存问题排除 具体解决如下&#xff1a; 1.free -h 查看当前分区大小和使用情况 2.扩展分区大小 2.1首先删除系统默认分区 sudo swapoff /swapfile sudo rm /swapfile 2.2新建swap分区&#xf…...

【论文阅读】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中&#xff0c;.NET Framework由&#xff08; &#xff09;组成。 A. FCL和CLR -开发库和运行环境B. ADO.NETASP.NET -数据操作和web框架C. CLS和CTS -语法规范和类型规范 即所有语言和语法规范 和 各语言间的类型互操作性规范D. Winform和ASP.NET…...

Sass @mixin 与 @include

Sass mixin 与 include mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。 include 指令可以将混入&#xff08;mixin&#xff09;引入到文档中。 定义一个混入 混入(mixin)通过 mixin 指令来定义。 mixin name { property: value; property: value; ... } 以…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...