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

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码点判断)是同一种语言,所以换行也不影响阅读理解。所以允许在连接词处换行。而对于下面的中文是可以在任意唯一换行。

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

相关文章:

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

word-break 属性在控制换行行为时需要根据语言判断&#xff0c;对于中文 一个字符就是一个单词&#xff0c;字符换行不影响阅读理解&#xff0c;而对于英文来说&#xff0c;多个连续的字符才会是一个单词&#xff0c;例如中文的 早 英文为 morning。 morning7个字符才算一个单词…...

【0x0084】HCI_Set_Min_Encryption_Key_Size命令详解

目录 一、命令概述 二、命令格式及参数 2.1 HCI_Set_Min_Encryption_Key_Size命令格式 2.2. Min_Encryption_Key_Size 三、生成事件及参数 3.1. HCI_Command_Complete 事件 3.2. Status 四、命令的执行流程 4.1. 主机端准备阶段 4.2. 命令发送阶段 4.3. 控制器接收和…...

关于2025年智能化招聘管理系统平台发展趋势

2025年&#xff0c;招聘管理领域正站在变革的十字路口&#xff0c;全新的技术浪潮与不断变化的职场生态相互碰撞&#xff0c;促使招聘管理系统成为重塑企业人才战略的关键力量。智能化招聘管理系统平台在这一背景下迅速崛起&#xff0c;其发展趋势不仅影响企业的招聘效率与质量…...

Docker部署Spring Boot + Vue项目

目录 前提条件 概述 下载代码 打开代码 Docker创建网络 MySQL容器准备 MySQL数据库配置 启动MySQL容器 测试连接MySQL 初始化MySQL数据 Redis容器准备 修改Redis配置 启动redis容器 部署后端 后端代码打包 上传jar包到Linux 创建Dockerfile 构建镜像 运行后…...

开发规范

开发规范 企业项目开发有2种开发模式&#xff1a;前后台混合开发和前后台分离开发。 前后台混合开发 顾名思义就是前台后台代码混在一起开发&#xff0c;如下图所示&#xff1a; 这种开发模式有如下缺点&#xff1a; 沟通成本高&#xff1a;后台人员发现前端有问题&#xf…...

九 RK3568 android11 MPU6500

一 MPU6500 内核驱动 1.1 查询设备连接地址 查看原理图, MPU6500 I2C 连接在 I2C4 上, 且中断没有使用 i2c 探测设备地址为 0x68 1.2 驱动源码 drivers/input/sensors/gyro/mpu6500_gyro.c drivers/input/sensors/accel/mpu6500_acc.c 默认 .config 配置编译了 mpu6550 …...

openplant实时数据库(二次开发)

资源地址 我的网盘〉软件>数据库>openplant>openplant实时数据库(二次开发)...

C语言:-三子棋游戏代码:分支-循环-数组-函数集合

思路分析&#xff1a; 1、写菜单 2、菜单之后进入游戏的操作 3、写函数 实现游戏 3.1、初始化棋盘函数&#xff0c;使数组元素都为空格 3.2、打印棋盘 棋盘的大概样子 3.3、玩家出棋 3.3.1、限制玩家要下的坐标位置 3.3.2、判断玩家要下的位置是否由棋子 3.4、电脑出棋 3.4.1、…...

“AI智慧化服务系统:未来生活的智能管家

在当今快速发展的科技时代&#xff0c;人工智能&#xff08;AI&#xff09;正以前所未有的速度改变着我们的生活。AI智慧化服务系统作为这一变革的前沿技术&#xff0c;正在逐渐成为我们未来生活的智能管家。它们不仅提高了服务效率&#xff0c;还为我们带来了更加个性化和便捷…...

python管理工具:conda部署+使用

python管理工具&#xff1a;conda部署使用 一、安装部署 1、 下载 - 官网下载&#xff1a; https://repo.anaconda.com/archive/index.html - wget方式&#xff1a; wget -c https://repo.anaconda.com/archive/Anaconda3-2023.03-1-Linux-x86_64.sh2、 安装 在conda文件的…...

minio https配置

minio启动时候指定数据目录,配置文件&#xff0c;密钥文件目录&#xff0c;环境文件 1.创建minio用户,专门用于服务启动的 groupadd -r minio-user useradd -M -r -g minio-user minio-user 2.在当前用户目录下创建minio目录&#xff0c;存储minio相关文件 mkdir minio 在mini…...

SpringMVC——原理简介

狂神SSM笔记 DispatcherServlet——SpringMVC 的核心 SpringMVC 围绕DispatcherServlet设计。 DispatcherServlet的作用是将请求分发到不同的处理器&#xff08;即不同的Servlet&#xff09;。根据请求的url&#xff0c;分配到对应的Servlet接口。 当发起请求时被前置的控制…...

Ubuntu18.04 解决 libc.so.6: version `GLIBC_2.28‘ not found

Glibc&#xff08;GNU C Library&#xff09;是 GNU 系统及其衍生系统如 Linux 操作系统中实现 C 语言标准库的核心组件。升级 Glibc 是一个非常谨慎的操作&#xff0c;因为它与系统的许多关键功能和服务密切相关。Ubuntu 18.04 默认安装的 Glibc 版本为 2.27&#xff0c;但某些…...

Notepad++移除所有空格

1.打开Notepad。 2.打开你想要编辑的文件。 3.按下 Ctrl H 打开查找和替换对话框&#xff0c;并选择 “正则表达式”。 4.在 “查找目标” 框中输入 \s。 5.在 “替换为” 框中留空&#xff0c;不填写任何内容。 6.点击 “全部替换” 按钮。...

Android BottomNavigationView不加icon使text垂直居中,完美解决。

这个问题网上千篇一律的设置iconsize为0&#xff0c;labale固定什么的&#xff0c;都没有效果。我的这个基本上所有人用都会有效果。 问题解决之前的效果&#xff1a;垂直方向&#xff0c;文本不居中&#xff0c;看着很难受 问题解决之后&#xff1a;舒服多了 其实很简单&…...

如何使用 `forEach` 遍历数组?

数组遍历相关问题&#xff1a;如何使用 forEach 遍历数组&#xff1f; 在 JavaScript 中&#xff0c;遍历数组是一个常见且必要的操作。数组提供了多种方法来进行遍历&#xff0c;其中 forEach 是一种非常方便且常用的方法。它可以轻松地对数组中的每个元素执行回调函数。理解…...

Go语言之路————条件控制:if、for、switch

Go语言之路————if、for、switch 前言ifforswitchgoto和label 前言 我是一名多年Java开发人员&#xff0c;因为工作需要现在要学习go语言&#xff0c;Go语言之路是一个系列&#xff0c;记录着我从0开始接触Go&#xff0c;到后面能正常完成工作上的业务开发的过程&#xff0…...

OpenAI推出首个AI Agent!日常事项自动化处理!

2025 年1月15日&#xff0c;OpenAI 正式宣布推出一项名为Tasks的测试版功能 。 该功能可以根据你的需求内容和时间实现自动化处理。比方说&#xff0c;你可以设置每天早晨 7 点获取天气预报&#xff0c;或定时提醒遛狗等日常事项。 看到这里&#xff0c;有没有一种熟悉的感觉&a…...

Go语言的编程范式

Go语言的编程范式 引言 Go语言&#xff0c;又称为Golang&#xff0c;由Google于2007年开发并于2009年开放源代码。Go语言被设计成一种简洁、高效且适用于多核计算和网络编程的语言。其独特的并发模型、静态类型系统以及高效的性能&#xff0c;使其在现代软件开发中逐渐获得了…...

如何在 Rocky Linux 上安装极狐GitLab?

本文分享如何在 Rocky Linux 操作系统上安装极狐GitLab。 相关资料 极狐GitLab 在各种操作系统下的安装指南官网文档 前提条件 一个安装了 Rocky Linux 操作系统的云服务器 可以查看 /etc/os-release 中的信息&#xff0c;确认操作系统信息&#xff1a; NAME"Rocky …...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...