CSS标点符号换行问题

最近遇到一个奇怪的现象,元素中中文文本正常显示,但是加了一堆符号后中文文本居然换行了.

div{width: 200px;border: 1px solid blue;word-break: break-all;}
<div>文本</div>

在这里插入图片描述
在这里插入图片描述
经过研究发现,因为标点符号不允许出现在行首和行尾,连带着符号前的一个文字也换行了。
解决方案:使用 line-break 属性

div{width: 200px;border: 1px solid blue;word-break: break-all;line-break:anywhere;}

在这里插入图片描述

line-break 可以用来处理如何断开(break lines)带有标点符号的中文、日文或韩文(CJK)文本的行。

属性描述
auto使用默认的断行规则分解文本。
loose使用尽可能松散(least restrictive)的断行规则分解文本。一般用于短行的情况,如报纸。
normal使用最一般(common)的断行规则分解文本。
strict使用最严格(stringent)的断行原则分解文本。
anywhere在每个印刷字符单元(typographic character unit)的周围,都有一个自动换行(soft wrap)的机会,包括任何标点符号(punctuation character)或是保留的空白字符(preserved white spaces),或是单词之间。但忽略任何用于阻止换行的字符,即使是来自 GL、WJ 或 ZWJ 字符集的字符,或是由 word-break 属性强制的字符。不同的换行机会拥有相同的优先级。也不应用断字符(hyphenation,可能是 “-”)。

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

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

相关文章

Kafka - 监控工具 Kafka Eagle:实时洞察Kafka集群的利器

文章目录 引言Kafka Eagle简介Kafka Eagle的特点Kafka Eagle的优势使用Kafka Eagle的步骤结论 引言 在现代大数据架构中&#xff0c;Apache Kafka已成为一个不可或缺的组件&#xff0c;用于可靠地处理和传输大规模的数据流。然而&#xff0c;随着Kafka集群规模的不断增长&…

第十四节——计算属性computed

一、概念 如果一个属性是由其他属性计算而来的&#xff0c;这个属性依赖其他属性&#xff0c;是一个多对一或者一对一&#xff0c;一般用computed computed 属性值会默认走缓存&#xff0c;计算属性是基于它们的响应式依赖进行缓存的&#xff0c;也就是基于data中声明过或者父…

QT基础学习笔记

文章目录 1 概述1.1 优点1.2 QT成功使用案例1.3 安装教程1.3.1 在线安装流程1.3.2 离线安装流程 2 创建工程2.1 快捷键2.1.1 常用快捷键2.1.2 修改快捷键 2.2 proj文件 3 对象树4 信号和槽4.1 自定义信号和槽4.1.1 信号连接信号4.1.2 一个信号连接多个槽函数4.1.3 多个信号连接…

【人工智能Ⅰ】4-蚁群算法

【人工智能Ⅰ】4-蚁群算法 文章目录 【人工智能Ⅰ】4-蚁群算法4.1 群智能概述群群智能 4.2 蚁群算法ACO概念特征 4.3 ACO伪代码4.4 TSP问题中的应用【1】初始化【2】选择路径【3】更新信息【4】输出结果 4.5 ACO基本思想4.6 关键参数选取4.7 算法参数设计策略组合参数设计策略终…

算法---缺失的第一个正数

题目 给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。示例 1&#xff1a;输入&#xff1a;nums [1,2,0] 输出&#xff1a;3 示例 2&#xff1a;输入&#xff1a;nums …

C++数据结构算法篇Ⅰ

C数据结构算法篇Ⅰ &#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;C算法 &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 主要内容讲解数据结构中的链表结构 文章目录 C数据…

WSL安装Ubuntu

先安装wsl2 安装Ubuntu 打开windows商店&#xff0c;搜索对应版本的Ubuntu&#xff0c;点击获取进度跑完后&#xff0c;点击打开&#xff0c;就可以完成安装 删除Ubuntu版本 wsl --unregister Ubuntu-18.04安装位置迁移 正常情况下Ubuntu是被安装在C盘&#xff0c;我们需要…

什么是数字展览馆,数字展览馆有什么应用前景

引言&#xff1a; 数字展览馆作为一种新兴的文化艺术展示形式&#xff0c;以数字化技术和虚拟现实为基础&#xff0c;正在逐渐改变传统展览的方式。 一、什么是数字展览馆&#xff1f; 1.定义 数字展览馆是利用数字技术和虚拟现实技术打造的一种线上文化艺术展示平台。通过虚…

@reduxjs/toolkit配置react-redux解决createStore或将在未来被淘汰警告

通常 我们用redux都需要通过 createStore 但目前 你去用它 基本都会被划线 甚至有点厉害的的编辑器 他会直接告诉你这个东西基本快被弃用了 这个应该大家都知道 最好不要用已经被明确未来或弃用的语法 因为一旦弃用这个系统就需要维护 而且说 一般会被淘汰的语法 本身也就是有…

2023年免费CRM软件盘点:14款热门工具全面比较(含开源)

在初创企业或小型企业阶段&#xff0c;特别是在预算有限且客户管理需求较为基础的情境下&#xff0c;使用免费的CRM系统通常是一个理智的选择。这类系统虽然在功能上可能不如付费版本丰富&#xff0c;但基本的客户信息管理、销售跟踪和沟通记录等核心功能通常都能满足需求。 对…

Flink SQL Hive Connector使用场景

目录 1.介绍 2.使用 2.1注册HiveCatalog 2.2Hive Read 2.2.1流读关键配置 2.2.2示例

玩了一下 Jenkins,最新版本 + JDK11

背景 今年五月的时候玩了一下 Jenkins&#xff0c;最新版本 2.414.3 &#xff0c;JDK 11 。本机有两个 JDK&#xff0c;只放到 Tomcat 里面了&#xff0c;看到了一个启动页面&#xff0c;后面有其他事情就忘记了。最近又想起来&#xff0c;觉得还是应该玩一下这么有技术含量的…

对一个金融风控测额公式的理解

目录 公式&#xff1a;&#xff08;近3个月回款总额/过去3个月的FBA平均库存价值&#xff09;*最近FBA的库存价值*过去13周FBA发货比例 详细讨论一下这个&#xff1a;&#xff08;近3个月回款总额/过去3个月的FBA平均库存价值&#xff09; 既然&#xff08;近3个月回款总额/…

liunx相关指令以及操作(未完待续)

1. 安装unzip和zip apt需要超级用户权限&#xff0c;可能需要在sudo下运行如下命令 sudo apt update sudo apt install unzip zip2. 删除压缩文件 删除名为xxx的压缩文件 !rm -rf xxx.zip3. 删除文件夹及文件夹下的所有 删除名字为xxx的文件夹及其所有内容 !rm -rf xxx4.…

kafka生产者源码精华总结

kafka的源码阅读起来思路很清晰&#xff0c;命名也很规范。 KafkaProducer值得学习的地方&#xff1a; Kafka的网络部分的设计绝对是一个亮点&#xff0c;Kafka基于NIO封装了一套自己的网络架构&#xff0c;支持一个客户端与多个Broker建立连接。处理拆包和粘包的思路和代码&…

PTA 函数题(C语言)-- 阶乘计算升级版

题目title&#xff1a; 阶乘计算升级版 题目作者&#xff1a; 陈越 浙江大学 本题要求实现一个打印非负整数阶乘的函数。 函数接口定义&#xff1a; void Print_Factorial ( const int N ); 其中N是用户传入的参数&#xff0c;其值不超过1000。如果N是非负整数&#…

数据结构和算法——用C语言实现所有图状结构及相关算法

文章目录 前言图的基本概念图的存储方式邻接矩阵邻接表十字链表临界多重表 图的遍历最小生成树普里姆算法&#xff08;Prim&#xff09;克鲁斯卡尔算法&#xff08;Kruskal&#xff09; 最短路径BFS求最短路径迪杰斯特拉算法&#xff08;Dijkstra&#xff09;弗洛伊德算法&…

chorme安装esay scholar及chrome 无法从该网站添加应用、扩展程序和用户脚本解决方案

问题描述 如题&#xff0c;博主想安装easy scholar用于查询论文的分区&#xff0c;结果安装了半天一直出现chrome 无法从该网站添加应用、扩展程序和用户脚本解决方案的问题。 解决方案 先从这个网址下载&#xff1a;https://www.easyscholar.cc/download 然后对下载好的文…

MFC网络通信-Udp服务端

目录 1、UI的布局 2、代码的实现&#xff1a; &#xff08;1&#xff09;、自定义的子类CServerSocket &#xff08;2&#xff09;、重写OnReceive事件 &#xff08;3&#xff09;、在CUdpServerDlg类中处理 &#xff08;4&#xff09;、在OnInitDialog函数中 &#xff0…

计算1到100的和

一、不好的写法 public static void main(String[] args) {int sum 0;int n 100;for (int i 1; i < n; i) {sum i;}System.out.println("sum" sum);}1.定义两个整型变量&#xff1b; 2.执行100次加法运算&#xff1b; 3.打印结果到控制台&#xff1b; 二、好…