深入理解 CSS 文本换行: overflow-wrap 和 word-break

前言

正常情况下,在固定宽度的盒子中的中文会自动换行。但是,当遇到非常长的英文单词或者很长的 URL 时,文本可能就不会自动换行,而会溢出所在容器。幸运的是,CSS 为我们提供了一些和文本换行相关的属性;今天来研究一下 CSS 中的文本换行。

  • overflow-wrap

  • word-break

  • white-space

  • line-break

  • hyphens

本篇文章重点讲述前两种方式 overflow-wrapword-break

1. overflow-wrap

overflow-wrap  用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行。其属性值有以下三种:

overflow-wrap: normal;
overflow-wrap: anywhere;
overflow-wrap: break-word;

(1)normal

属性值为 normal 将使浏览器使用系统的默认换行行为。因此,对于英语和其他相关书写系统,换行符将出现在空格和连字符处。

fileOf7298.png

从图中可以看出,段落中有一个很长的单词溢出了容器,这是系统的默认换行行为。

(2)anywhere

使用值 anywhere 将在字符串之间的任意点来进行中断,仅当在其行上显示单词会导致溢出时,浏览器才会中断该单词。如果单词放在其行上时仍然溢出,它将在发生溢出的点处中断该单词。

fileOf7298.png

可以看到,使用  overflow-wrap:anywhere  将溢出的单词分解成文本块,这样就可以将其放入容器中。这里文本所在的容器宽度是固定的。

该属性会影响其所在元素的  min-content  属性大小计算。当width设置为min-content时很容易看出来:

.break-word {width: min-content;overflow-wrap: break-word;
}.anywhere {width: min-content;overflow-wrap: anywhere;
}

效果如下:

fileOf7298.png

可以看到,带有overflow-wrap:break-word 的元素计算出的  min-content  就像单词没有被破坏一样,因此它的宽度变成了最长单词的宽度。而带有  overflow-wrap:anywhere  的元素,由于在任何地方都可能发生中断,因此  min-content  最终成为单个字符的宽度。

注意,这种行为只有为文本所在容器的宽度设置为min-content时才会发挥作用,如果宽度设置为固定的值,那么anywhere  和  break-word  的表现是一致的。

另外需要注意,目前有些浏览器不支持该属性:

fileOf7298.png

(3)break-word

break-word  属性表示如果行内没有多余的地方容纳该单词到结尾,则那些正常的不能被分割的单词会被强制分割换行。

fileOf7298.png

可以看到,文本在长单词的某个地方自动换行了。如果文本所在容器设置了固定的宽度,就会在长单词溢出的地方换行。

(4)浏览器兼容性

overflow-wrap  属性就是原来的word-wrapword-wrap最初是一个没有前缀的 Microsoft 扩展。它不是 CSS 标准的一部分,尽管大多数浏览器都使用 word-wrap 这个名称来实现它。根据 CSS3 规范草案,浏览器应将word-wrap视为overflow-wrap属性的遗留名称别名,以确保兼容性。

fileOf7298.png

2. word-break

word-break 属性用于指定怎样在单词内进行断行。我们可以使用该属性在内容发生溢出的确切位置拆分单词并将其换行到下一行。下面是  word-break的属性值:

word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word;

需要注意,break-word 属性值已经被弃用,但是由于遗留原因,浏览器仍然支持它。指定该属性与同时使用word-break: normal  和  overflow-wrap: anywhere   的效果是一样的。

下面就来看看前三个属性:

(1)normal

将  word-break  属性的值设置为  normal  将应用默认的断行规则:

fileOf7298.png

可以看到,设置为  normal  时,和不设置word-break时的效果是一样的,这就是浏览器默认的断行行为。

(2)break-all

当属性值为  break-all  时,对于 non-CJK (CJK 指中文/日文/韩文) 的文本,可在任意字符间断行。

fileOf7298.png

可以看到,长单词在溢出的位置将剩余的文本进行了换行。使用  break-all  将在英语和其他相关语言系统中发生溢出的确切位置在两个字符之间断开一个单词。但是,它不会对中文、日文和韩文文本应用相同的行为。因为 CJK 书写系统有自己的应用断点规则。

(3)keep-all

如果使用值  keep-all,即使内容溢出,浏览器也不会将分词应用于 CJK 文本。应用 keep-all 值的效果与非 CJK 书写系统的正常效果相同。简单来说就是,像英语这种 CJK 文本不会断行,像中文这种 Non-CJK 文本表现同  normal

fileOf7298.png

(4)浏览器兼容性

fileOf7298.png

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

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

相关文章

【NumPy进阶】:内存视图、性能优化与高级线性代数

目录 1. 深入理解 NumPy 的内存视图与拷贝1.1 内存视图(View)1.1.1 创建视图1.1.2 视图的特点 1.2 数组拷贝(Copy)1.2.1 创建拷贝1.2.2 拷贝的特点 1.3 视图与拷贝的选择 2. NumPy 的优化与性能提升技巧2.1 向量化操作示例&#x…

HarmonyOS 5.0应用开发——属性动画

【高心星出品】 文章目录 属性动画animateTo属性动画animation属性动画 属性动画 属性接口(以下简称属性)包含尺寸属性、布局属性、位置属性等多种类型,用于控制组件的行为。针对当前界面上的组件,其部分属性(如位置属…

机器学习支持向量机(SVM)算法

一、引言 在当今数据驱动的时代,机器学习算法在各个领域发挥着至关重要的作用。支持向量机(Support Vector Machine,SVM)作为一种强大的监督学习算法,以其在分类和回归任务中的卓越性能而备受瞩目。SVM 具有良好的泛化…

介绍一款docker ui 管理工具

http://vm01:18999/main.html 管理员登陆账号 jinghan/123456 ui启动命令所在文件夹目录 /work/docker/docker-ui 参考链接 DockerUI:一款功能强大的中文Docker可视化管理工具_docker ui-CSDN博客

Motrix WebExtension 使用教程

Motrix WebExtension 使用教程 项目地址:https://gitcode.com/gh_mirrors/mo/motrix-webextension 项目介绍 Motrix WebExtension 是一个浏览器扩展,用于与 Motrix 下载管理器集成。该扩展允许用户通过 Motrix 下载管理器自动下载文件,而不是使用浏览器的原生下载管理器。…

前端(四)css选择器、css的三大特性

css选择器、css的三大特性 文章目录 css选择器、css的三大特性一、css介绍二、css选择器2.1 基本选择器2.2 组合选择器2.3 交集并集选择器2.4序列选择器2.5属性选择器2.6伪类选择器2.7伪元素选择器 三、css三大特性3.1 继承性3.2 层叠性3.3 优先级 一、css介绍 CSS全称为Casca…

《探索视频数字人:开启未来视界的钥匙》

一、引言 1.1视频数字人技术的崛起 在当今科技飞速发展的时代,视频数字人技术如一颗璀璨的新星,正逐渐成为各领域瞩目的焦点。它的出现,犹如一场科技风暴,彻底改变了传统的视频制作方式,为各个行业带来了前所未有的机…

【ETCD】[源码阅读]深度解析 EtcdServer 的 processInternalRaftRequestOnce 方法

在分布式系统中,etcd 的一致性与高效性得益于其强大的 Raft 协议模块。而 processInternalRaftRequestOnce 是 etcd 服务器处理内部 Raft 请求的核心方法之一。本文将从源码角度解析这个方法的逻辑流程,帮助读者更好地理解 etcd 的内部实现。 方法源码 …

免费下载 | 2024算网融合技术与产业白皮书

《2024算网融合技术与产业白皮书(2023年)》的核心内容概括如下: 算网融合发展概述: 各国细化算网战略,指引行业应用创新升级。 算网融合市场快速增长,算力互联成为投资新热点。 算网融合产业模式逐渐成型…

基于卷积神经网络的图像二分类检测模型训练与推理实现教程 | 幽络源

前言 对于本教程,说白了,就是期望能通过一个程序判断一张图片是否为某个物体,或者说判断一张图片是否为某个缺陷。因为本教程是针对二分类问题,因此主要处理 是 与 不是 的问题,比如我的模型是判断一张图片是否为苹果…

安全见闻全解析

跟随 泷羽sec团队学习 声明! 学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下,如涉及侵权马上删除文章,笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内容,只做学习交流,其他均与本人以及…

代码随想录-算法训练营-番外(图论02:岛屿数量,岛屿的最大面积)

day02 图论part02 今日任务:岛屿数量,岛屿的最大面积 都是一个模子套出来的 https://programmercarl.com/kamacoder/0099.岛屿的数量深搜.html#思路往日任务: day01 图论part01 今日任务:图论理论基础/所有可到达的路径 代码随想录图论视频部分还没更新 https://programmercar…

RabbitMQ个人理解与基本使用

目录 一. 作用: 二. RabbitMQ的5中队列模式: 1. 简单模式 2. Work模式 3. 发布/订阅模式 4. 路由模式 5. 主题模式 三. 消息持久化: 消息过期时间 ACK应答 四. 同步接收和异步接收: 应用场景 五. 基本使用 &#xff…

前端怎么预览pdf

1.背景 后台返回了一个在线的pdf地址,需要我这边去做一个pdf的预览(需求1),并且支持配置是否可以下载(需求2),需要在当前页就能预览(需求3)。之前我写过一篇预览pdf的文…

Python 参数配置使用 XML 文件的教程:轻松管理你的项目配置

Python 参数配置使用 XML 文件的教程:轻松管理你的项目配置 一句话总结:当配置项存储在外部文件(如 XML、JSON)时,修改配置无需重新编译和发布代码。通过更新 XML 文件即可调整参数,无需更改源代码&#xf…

解决 MySQL 启动失败与大小写问题,重置数据库

技术文档:解决 MySQL 启动失败与大小写问题,重置数据库 1. 问题背景 在使用 MySQL 时,可能遇到以下问题: MySQL 启动失败,日志显示 “permission denied” 或 “Can’t create directory” 错误。MySQL 在修改配置文…

python webdriver-manager 实现selenium 免下载安装webdriver

python webdriver-manager 实现selenium 免下载安装webdriver selenium在自动化测试中,通常需要使用浏览器驱动来与浏览器进行交互。然而,手动下载、安装、以及管理这些驱动非常麻烦,尤其是当驱动版本频繁更新时。为此,webdriver-manager库提供了一个极简的方案,自动帮我…

滑动窗口算法专题

滑动窗口简介 滑动窗口就是利用单调性,配合同向双指针来优化暴力枚举的一种算法。 该算法主要有四个步骤 1. 先进进窗口 2. 判断条件,后续根据条件来判断是出窗口还是进窗口 3. 出窗口 4.更新结果,更新结果这个步骤是不确定的&#xff0c…

C# 中的Task

文章目录 前言一、Task 的基本概念二、创建 Task使用异步方法使用 Task.Run 方法 三、等待 Task 完成使用 await 关键字使用 Task.Wait 方法 四、处理 Task 的异常使用 try-catch 块使用 Task.Exception 属性 五、Task 的延续使用 ContinueWith 方法使用 await 关键字和异步方法…

【AIGC】如何高效使用ChatGPT挖掘AI最大潜能?26个Prompt提问秘诀帮你提升300%效率的!

还记得第一次使用ChatGPT时,那种既兴奋又困惑的心情吗?我是从一个对AI一知半解的普通用户,逐步成长为现在的“ChatGPT大神”。这一过程并非一蹴而就,而是通过不断的探索和实践,掌握了一系列高效使用的技巧。今天&#…