FE_TA不知道的CSS 换行系列【2】word-break word-wrap

news2024/11/15 2:14:32

从这个名字可以知道,这个属性是控制单词如何被拆分换行的。它有三个值:normal | break-all | keep-all。

1 word-break:keep-all

所有“单词”一律不拆分换行,注意,我这里的“单词”包括连续的中文字符(还有日文、韩文等),或者可以理解为只有空格可以触发自动换行。

在这里插入图片描述

2 word-break:break-all

所有单词碰到边界一律拆分换行,不管你是incomprehensibilities这样一行都显示不下的单词,还是long这样很短的单词,只要碰到边界,都会被强制拆分换行。所以用word-break:break-all时要慎重呀。

在这里插入图片描述
这样的效果好像并不太好呀,能不能就把incomprehensibilities拆一下,其它的单词不拆呢?那就需要下面这个属性了:

3 word-wrap(overflow-wrap)

word-wrap又叫做overflow-wrap:

word-wrap 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

这个属性也是控制单词如何被拆分换行的,实际上是作为word-break的互补,它只有两个值:normal | break-word,
在这里插入图片描述

在这里插入图片描述
终于达到了上文我们希望的效果,只有当一个单词一整行都显示不下时,才会拆分换行该单词。所以我觉得overflow-wrap更好理解好记一些,overflow,只有长到溢出的单词才会被强制拆分换行!

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

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

相关文章

Web 学习笔记 - 网络安全

前言 Web 安全方面的基本知识是有很必要的,未必就要深入理解。本文主要介绍常见的网络攻击类型,不作深入探讨。 正文 网络攻击的形式种类繁多,从简单的网站敏感文件扫描、弱口令暴力破解,到 SQL 注入,再到复杂的网络…

2023-04-24 Nginx基本使用

Nginx 文章目录 Nginx1.Nginx安装2.Nginx命令3.静态资源3.2 解决403问题3.3 root与alias区别 4.反向代理/负载均衡4.1 正向代理4.2 反向代理4.3 负载均衡策略 5.动静分离 1.Nginx安装 1.上传解压Nginx压缩包 2.先安装所需依赖包 yum -y install pcre-develyum -y install ope…

Flink+Pulsar、Kafka问题分析及方案

背景 消息队列如Kafka、Pulsar利用事务特性所提供的exactly once语义,只能在特定使用场景 consume-transform-produce 下保证,即一个事务同时包含了生产和消费,利用事务的原子性,事务中的操作包含sink端的生产和source端的offset提…

从STL的视角,了解下Map、Set、Tuple和Initializer_List的区别

📖作者介绍:22级树莓人(计算机专业),热爱编程<目前在c++阶段>——目标Windows,MySQL,Qt,数据结构与算法,Linux,多线程&…

React-Native启动页

本文将从 Android 和 IOS 两端分别详细介绍APP是如何设置名称、图标以及启动页的。 首先我们到 图标工厂 上传一张 1024x1024 的图标,然后一键生成所有尺寸的图标,下载下来供两端使用。 IOS端 设置名称 在 Xcode 中点击你的项目修改右侧 Display Name …

深入浅出MySQL——MySQL基础

文章目录 数据库基础数据库概念主流数据库服务器,数据库,表关系基本使用MySQL架构SQL语句分类存储引擎 库的操作创建数据库创建数据库案例字符集和校验规则操纵数据库 表的操作创建表查看表结构修改表删除表 数据类型数据类型分类数值类型字符串类型 表的…

【华为机考】专题突破 第一周:单调栈 739 、503 、901、84

刷题顺序参考于 《2023华为机考刷题指南:八周机考速通车》 前言 单调栈:分为单调递增和单调递减栈。(栈内元素成递增或者递减性): 单调递增栈:从栈底到栈顶数据是从大到小,即 栈内的元素从栈顶 到栈底 是递增的&#x…

react-10 函数式写法rsc,配合HOOKS钩子函数

性能优化:useMemo :用于组件性能优化(缓存计算属性,变化才执行)是通过缓存值的方式实现性能优化 useMemo(callback, array):性能优化,利用了闭包的特性,会返回一个记忆值, 通过 记…

3D线光谱共焦位移传感器在医疗领域的应用

随着社会的发展,越来越多的行业对微观物体表面形貌的观察提出了越来越高的要求。与生命健康息息相关的医疗行业就是其中之一。但是传统的显微镜只能达到聚焦区域的图像清晰,非聚焦区域图像模糊。因此,普通显微镜无法在相同景深下实现对物体表…

两大消息爆出,币圈正在响应全球“去美元化”行动

为了维持美元霸权、对全球进行收割,美联储连续加息反而拉爆了自家银行。欧美银行危机事件,让人们觉得把钱放在银行里并不安全,加密货币的去中心化本质,令币圈逆风翻盘。数据显示,比特币今年上涨了近72%,这可…

《编码——隐藏在计算机软硬件背后的语言》精炼——第12章(二进制加法器)

“I hear and I forget. I see and I remember. I do and I understand”——Confucius 人类计算二进制数的方法 我们先计算本位的结果,称为加法位;再计算是否进位,称为进位位。 搭建二进制加法器 我们用逻辑门来搭建二进制加法器。它的思想…

CHAPTER 8: 《DESIGN A URL SHORTENER》第8章 《设计一个url伸缩器》

CHAPTER 8: DESIGN A URL SHORTENER 在这一章中,我们将解决一个有趣而经典的系统设计面试问题:设计一个像tinyurl这样的网址缩短服务。 步骤1 -理解问题并确定设计范围 系统设计面试的问题是故意留下开放式的。精心设计系统中,提出澄清性问题是至关重…

HDCTF 2023 复盘

web yamiyami 当时考虑直接读的/proc/self/environ 读到flag是not_flag 就没考虑过/proc/1/environ了 然后不知道py3URL二次编码的特性,读不到源码,无从下手 做flask算pin码的题做多了,还以为pid是1的就是self,难顶 上面那种是非预期 预期是yaml反序列化 先读源码 /read?u…

产品推荐丨智慧水利行业应用终端+云平台

智慧水利是我国智慧城市建设的重要延伸,是新时代水利现代化的战略目标,贯穿于防汛抗旱减灾、水资源合理配置和高效利用、水资源和河湖健康保障等体系。随着水利技术的集成发展与场景的成熟应用,我国水利现已完成从自动化阶段到信息化阶段的过…

学习系统编程No.13【文件系统】

引言: 北京时间:2023/3/31/7:48,该篇博客在两天前本就应该产出,但是摆烂谁拦得住,所以呜呜呜!本以为欠的钱也要快还完了,没想到啊,越欠越多,烦人!但是&#…

领略未来无需远方,华为全屋智能将在AWE描绘智慧生活新图景

作者 | 曾响铃 文 | 响铃说 4月27日-30日,AWE 2023中国家电及消费电子博览会将在上海新国际博览中心举行,这是AWE展沉淀两年后的再次回归。 作为家电及消费电子领域TOP3的国际盛会,本届AWE以“智科技,创未来”为主题&#xff0…

Redis 数据存储原理

核心模块如图 1-10。 图1-10 图 1-10 Client 客户端,官方提供了 C 语言开发的客户端,可以发送命令,性能分析和测试等。 网络层事件驱动模型,基于 I/O 多路复用,封装了一个短小精悍的高性能 ae 库,全称是 …

如何写好学位论文

昨天刚提交了学位论文,今天准备来总结一下一些常用的Word写作技巧。 样式与多级列表 论文一般都会对章节条目的标题、参考文献、表格内容、题注的字体字号、行间距、段落间距等作出规定。为每一类文字设置一种样式,在写的时候直接应用样式可以方便地对全…

研报精选230421

目录 【行业230421南京证券】氢能行业:地缘政治加速绿色能源转型 【行业230421华安证券】AIGC行业研究框架与投资逻辑 【行业230421信达证券】工控行业深度报告:行业拐点将至,国产品牌加速崛起 【个股230421国信证券_华阳集团】聚焦汽车智能化…

ruoyi启动前端报错‘vue-cli-service‘ 不是内部或外部命令

解决方案: 在新项目的pack.json的文件目录,执行命令npm install 或者 cnpm install 如果报npm 不是内部命令,需要在系统配置全局的变量 在使用npm的时候,或者是通过npm下载了一些包,使用这些包的时候,有时…