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

news/2025/1/16 16:36:34/

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.ppmy.cn/news/1563659.html

相关文章

如何从本地计算机连接至远程服务器上的 Jupyter Notebook

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

C++并发编程之跨应用程序与驱动程序的单生产者单消费者队列

设计一个单生产者单消费者队列&#xff08;SPSC队列&#xff09;&#xff0c;不使用C STL库或操作系统原子操作函数&#xff0c;并且将其放入跨进程共享内存中以便在Ring3&#xff08;用户模式&#xff09;和Ring0&#xff08;内核模式&#xff09;之间传递数据&#xff0c;是一…

【Java设计模式-4】策略模式,消灭if/else迷宫的利器

各位Java编程小伙伴们&#xff01;今天咱们要一起探索一个超级厉害的Java设计模式——策略模式&#xff0c;它就像是一把神奇的魔法剑&#xff0c;专门用来斩断那些让我们代码变得乱糟糟的if/else语句迷宫&#xff01; 一、if/else的烦恼 在编程的奇妙世界里&#xff0c;我们…

《Java核心技术II》实现服务器

实现服务器 这节实现简单服务器&#xff0c;可以向客户端发送信息。 服务器套接字 ServerSocket用于建立套接字 var s new ServerSocket(8189); 建立一个监听端口8189的服务器。 Socket incoming s.accept(); 此对象可以得到输入流和输出流。 InputStream inStream incomin…

LabVIEW光流算法的应用

该VI展示了如何使用NI Vision Development Module中的光流算法来计算图像序列中像素的运动矢量。通过该方法&#xff0c;可以实现目标跟踪、运动检测等功能&#xff0c;适用于视频处理、机器人视觉和监控领域。程序采用模块化设计&#xff0c;包含图像输入、算法处理、结果展示…

【DevOps】Pipeline功能语法

Pipeline功能语法 一、options全局配置 # 在pipeline下一层添加即可 options {timestamps () // 打印日志时间timeout(time: 10, unit: MINUTES) // 设置流水线执行超时时间 天(DAYS) 时(HOURS) 分钟(MINUTES) 秒(SECONDS)}二、tools全局工具 tools { maven "M…

redis监控会不会统计lua里面执行的命令次数

问题&#xff1a;redis lua里面执行的命令会不会计算到监控的qps中 假设&#xff1a; lua 脚本中对数据库操作了1w次。 执行一次lua 脚本&#xff0c; 虽然内部对数据库操作了1w次&#xff0c; 但是从redis 监控上看只是执行了一次lua脚本&#xff0c; lua内部对数据库的1w次不…

小程序如何引入腾讯位置服务

小程序如何引入腾讯位置服务 1.添加服务 登录 微信公众平台 注意&#xff1a;小程序要企业版的 第三方服务 -> 服务 -> 开发者资源 -> 开通腾讯位置服务 在设置 -> 第三方设置 中可以看到开通的服务&#xff0c;如果没有就在插件管理中添加插件 2.腾讯位置服务…