word-break控制的几种容器换行行为详解

word-break 属性在控制换行行为时需要根据语言判断,对于中文 一个字符就是一个单词,字符换行不影响阅读理解,而对于英文来说,多个连续的字符才会是一个单词,例如中文的 早 英文为 morning。 morning7个字符才算一个单词,mo rni ng 如果是呈现这种情况,是及其不易阅读理解。也就是说 word-break的换行行为是和字符的unicode码有关。

  • break-all
    允许容器内的单词不连续换行,也就是当字符到达容器边界时,可以拆词,这是主要是适用于英文、字符、数字的。例如允许将moring换行成
    mo
    rni
    ng
<div style="width: 100px;background-color: lightblue;"><span style="word-break: break-all">Good morningmorningmorning! Good morning!Good morning!</span>
</div>

在这里插入图片描述
设置了break-all就是在任意位置可以换行。

  • keep-all

keep-all对于英文单词,会保持一个完整的单词不会换行,除非遇到空格,而对于中文遇到空格或者标点符合会换行,否则连续的中文字符也会保持在一行。

<div style="width: 100px;background-color: lightblue;"><span style="word-break: keep-all">Good morningmorningmorning! Good morning!Good morning!</span>
</div>
<br>
<br>
<br>
<br>
<div style="width: 100px;background-color: yellowgreen;"><span style="word-break: keep-all ">早上好.早上好早上好早上好早上好早上 好早上好早上好</span>
</div>

在这里插入图片描述

  • normal

对于英文来说 会在空格或中文连字符处换行,对于中文会在任意位置换行。

<div style="width: 100px;background-color: lightblue;"><span style="word-break: normal">Good morningmorni中ngmorning! Good morning!Good morning!</span>
</div>
<br>
<br>
<br>
<br>
<div style="width: 100px;background-color: yellowgreen;"><span style="word-break: normal ">早上好.早上好早上好早上好早上好早上 好早上好早上好</span>
</div>

在这里插入图片描述

这里可以看到第一段中的英文会在“”中“” 这个连接词位置换行,浏览器会认为一个英文字符串不会和一个中文(通过Unicdoe码点判断)是同一种语言,所以换行也不影响阅读理解。所以允许在连接词处换行。而对于下面的中文是可以在任意唯一换行。

浏览器的换行行为最少是基于一个字符为单位的,不会把一个字符拆开换行显示,例如 好 不会拆成 女 和 子 展示。

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

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

相关文章

年后找工作需要注意的事项

大家好&#xff01;我是 [数擎 AI]&#xff0c;一位热爱探索新技术的前端开发者&#xff0c;在这里分享前端和 Web3D、AI 技术的干货与实战经验。如果你对技术有热情&#xff0c;欢迎关注我的文章&#xff0c;我们一起成长、进步&#xff01; 开发领域&#xff1a;前端开发 | A…

Flink链接Kafka

一、基于 Flink 的 Kafka 消息生产者 Kafka 生产者的创建与配置&#xff1a; 代码通过 FlinkKafkaProducer 创建 Kafka 生产者&#xff0c;用于向 Kafka 主题发送消息。Flink 执行环境的配置&#xff1a; 配置了 Flink 的检查点机制&#xff0c;确保消息的可靠性&#xff0c;支…

Windows 10 ARM工控主板连接I2S音频芯片

在Windows工控主板应用中&#xff0c;音频功能是一项基本的需求&#xff0c;USB声卡在x86/x64 Windows系统上就可直接免驱使用&#xff0c;但这些USB声卡通常不提供ARM上的Windows系统驱动。本文将介绍如何利用安装在ARM上的Windows工控主板——ESM8400的I2S接口、连接WM8960音…

机器学习实战33-LSTM+随机森林模型在股票价格走势预测与买卖点分类中的应用

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下机器学习实战33-LSTM随机森林模型在股票价格走势预测与买卖点分类中的应用。对于LSTM随机森林模型的融合应用&#xff0c;我们选择股票价格走势预测与买卖点分类作为应用场景。股票市场数据丰富且对投资者具有实际价…

在VS2022中用C++连接MySQL数据库读取数据库乱码问题

1.正确安装mysql 安装之后的配置文件 2.在VS2022中进行相关配置 &#xff08;1&#xff09;右键项目&#xff0c;打开属性 注意是右键项目&#xff0c;不是.cpp文件 &#xff08;2&#xff09;配置属性-> VC目录 -> 包含目录 ->添加头文件路径&#xff08;如图&am…

vue3+ts+element-plus 输入框el-input设置背景颜色

普通情况&#xff1a; 组件内容&#xff1a; <el-input v-model"applyBasicInfo.outerApplyId"/> 样式设置&#xff1a; ::v-deep .el-input__wrapper {background-color: pink; }// 也可以这样设置 ::v-deep(.el-input__wrapper) {background-color: pink…

Realsense相机驱动安装及其ROS通讯配置——机器人抓取系统基础系列(四)

文章目录 概要1 Realsense相机驱动安装Method1: 使用Intel服务器预编译包Method2: 使用ROS服务器预编译包Method3: 使用SDK源代码方法对比总结 2 Realsense-ROS通讯配置与使用2.1 Realsense-ROS包安装2.2 ROS节点启动 小结Reference 概要 本文首先阐述了Realsense相机驱动安装…

初识 Git——《Pro Git》

Why Git&#xff1f; 1. 本地版本控制系统 Why&#xff1a; 许多人习惯用复制整个项目目录的方式来保存不同的版本&#xff0c;或许还会改名加上备份时间以示区别。 这么做唯一的好处就是简单&#xff0c;但是特别容易犯错。 有时候会混淆所在的工作目录&#xff0c;一不小心…

Freeswitch使用media_bug能力实现回铃音检测

利用freeswitch的media bug能力来在智能外呼时通过websocket对接智能中心的声音检测接口&#xff0c;来实现回铃音检测&#xff0c;来判断用户当前是否已响应&#xff0c;拒接&#xff0c;关机等。 1.回铃音处理流程 2.模块源码目录结构 首先新建一个freeswitch的源码的src/a…

我的年度总结

这一年的人生起伏&#xff1a;从曙光到低谷再到新的曙光 其实本来没打算做年度总结的&#xff0c;无聊打开了帅帅的视频&#xff0c;结合自己最近经历的&#xff0c;打算简单聊下。因为原本打算做的内容会是一篇比较丧、低能量者的呻吟。 实习生与创业公司的零到一 第一段工…

Hive SQL必刷练习题:留存率问题

首次登录算作当天新增&#xff0c;第二天也登录了算作一日留存。可以理解为&#xff0c;在10月1号登陆了。在10月2号也登陆了&#xff0c;那这个人就可以算是在1号留存 今日留存率 &#xff08;今日登录且明天也登录的用户数&#xff09; / 今日登录的总用户数 * 100% 解决思…

ASP.NET Core - 缓存之分布式缓存

ASP.NET Core - 缓存之分布式缓存 1. 分布式缓存的使用2. 分布式缓存的接入2.1 基于内存的分布式缓存2.2 基于 Redis 的分布式缓存 分布式缓存是由多个应用服务器共享的缓存&#xff0c;通常作为访问它的应用服务器的外部服务进行维护。 分布式缓存可以提高 ASP.NET Core 应用的…

机器学习中的凸函数和梯度下降法

一、凸函数 在机器学习中&#xff0c;凸函数 和 凸优化 是优化问题中的重要概念&#xff0c;许多机器学习算法的目标是优化一个凸函数。这些概念的核心思想围绕着优化问题的简化和求解效率。下面从简单直观的角度来解释。 1. 什么是凸函数&#xff1f; 数学定义 一个函数 f…

flutter R库对图片资源进行自动管理

项目中对资源的使用是开发过程中再常见不过的一环。 一般我们在将资源导入到项目中后,会通过资源名称来访问。 但在很多情况下由于我们疏忽输入错了资源名称,从而导致资源无法访问。 所以,急需解决两个问题: 资源编译期可检查可方便预览资源安装相关插件 在vscode中安装两…

闲谭SpringBoot--ShardingSphere分布式事务探究

文章目录 0. 背景1. 未分库分表时2. 仅分表时3. 分库分表时3.1 不涉及分库表3.2 涉及分库表&#xff0c;且分库表处于一个库3.3 涉及分库表&#xff0c;且分库表处于多个库3.4 涉及分库表&#xff0c;且运行中某库停机 4. 小结 0. 背景 接上篇文章《闲谭SpringBoot–ShardingS…

【Linux】--- 进程的等待与替换

进程的等待与替换 一、进程等待1、进程等待的必要性2、获取子进程status3、进程等待的方法&#xff08;1&#xff09;wait&#xff08;&#xff09;函数&#xff08;2&#xff09;waitpid函数 4、多进程创建以及等待的代码模型5、非阻塞接口 轮询 二、进程替换1、替换原理2、替…

AI 编程工具—Cursor进阶使用 阅读开源项目

AI 编程工具—Cursor进阶使用 阅读开源项目 首先我们打开一个最近很火的项目browser-use ,直接从github 上克隆即可 索引整个代码库 这里我们使用@Codebase 这个选项会索引这个代码库,然后我们再选上这个项目的README.md 文件开始提问 @Codebase @README.md 这个项目是用…

keepalived双机热备(LVS+keepalived)实验笔记

目录 前提准备&#xff1a; keepalived1&#xff1a; keepalived2&#xff1a; web1&#xff1a; web2&#xff1a; keepalived介绍 功能特点 工作原理 应用场景 前提准备&#xff1a; 准备4台centos&#xff0c;其中两台为keepalived&#xff0c;两台为webkeepalive…

【dockerros2】ROS2节点通信:docker容器之间/docker容器与宿主机之间

&#x1f300; 一个中大型ROS项目常需要各个人员分别完成特定的功能&#xff0c;而后再组合部署&#xff0c;而各人员完成的功能常常依赖于一定的环境&#xff0c;而我们很难确保这些环境之间不会相互冲突&#xff0c;特别是涉及深度学习环境时。这就给团队项目的部署落地带来了…

ASP.NET Core - IStartupFilter 与 IHostingStartup

ASP.NET Core - IStartupFilter 与 IHostingStartup 1. IStartupFilter2 IHostingStartup2.5.1 创建外部程序集2.5.2 激活外部程序集 1. IStartupFilter 上面讲到的方式虽然能够根据不同环境将Startup中的启动逻辑进行分离&#xff0c;但是有些时候我们还会可以根据应用中的功能…