Css 强制英文自动换行以及word-wrap、word-break、white-space、overflow的用法

article/2025/10/8 15:47:37

关于换行的几个知识点:

1、Css强制英文或数字自动换行
2、让中文按关键词或标签换行
3、Css强制中文不自动换行
4、Css强制中文不自动换行并自动隐藏;
5、Css中英文或数字的超出部分自动省略号…;
6、Css中word-wrap、word-break、white-space、overflow、text-overflow的用法讲解;


一、强制英文自动换行:

举例:<p>中文</p> <p>English</p>
<p>标签宽度200Px。没限高度。那么下面英文就出现破行显示,中文并没有这个问题。只要在P标签加上下面CSS样式即可

p{word-wrap:break-word; word-break:break-all; 
}



二、让中文按关键词或标签换行:

上面中文换行,是不是第三个【我是中文】分成上下分离。如果在做关键词展示时,需要按个关键词换行改成下面Css样式即可(注意:如果你的一个关键词都超过了<P>的宽度,那么,还是会自动换行)
下面英文也换行,是因为中间有个空格。keep-all的换行逻辑是以关键词或词组来判定是否换行,break-all的换行逻辑是按单个字或字母来换行

p{word-wrap:break-word; word-break:keep-all; 
}


三、强制中文不自动换行:

上面看到了中文会自动换行,现在我们不需要中文自动换行,使用下面代码

p{white-space:nowrap;
}

四、强制中文不自动换行并隐藏:

代码如下

p{white-space:nowrap;overflow:hidden;
}

五、中英文或数字的超出部分自动省略号…

代码如下

p{white-space:nowrap;overflow:hidden;text-overflow :ellipsis;
}

六、样式word-wrap、word-break、white-space、overflow、text-overflow解说

CSS word-wrap 属性

描述
normal只在允许的断字点换行(浏览器保持默认处理)。
break-word在长单词或 URL 地址内部进行换行。

CSS word-break 属性

描述
normal使用浏览器默认的换行规则。
break-all允许在单词内换行。
keep-all只能在半角空格或连字符处换行。

CSS white-space 属性

描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。

CSS overflow 属性

描述
visible默认值。内容不会被修剪,会呈现在元素框之外。
hidden内容会被修剪,并且其余内容是不可见的。
scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。

CSS text-overflow 属性

描述
clip修剪文本。
ellipsis显示省略符号来代表被修剪的文本。
string使用给定的字符串来代表被修剪的文本。


http://chatgpt.dhexx.cn/article/7RNAdZF7.shtml

相关文章

功能测试的用例测试方法

一、等价类划分法&#xff1a; 即把所有可能输入的数据划分为若干个区域&#xff0c;然后从每个区域中取少数有嗲表行的数据进行测试。 例1&#xff1a;某网页的年龄输入框要求输入20~99的整数。&#xff08;说明&#xff1a;当输入的数据复合取值范围要求时提示&#xff1a;…

计算机性能检查方法,测试电脑性能的方法步骤详解

想知道自己电脑的运行性能吗?下面就让学习啦小编教大家如何测试电脑的性能吧。 测试电脑性能的方法 1.使用系统功能进行评测电脑的运行性能 这种方法就是通过windows自带的评测功能进行测试。 打开资源管理器&#xff0c;右键点击“属性”&#xff0c;进入到相应的窗口中来! 如…

性能测试七种常用方法,以及四大应用领域

文章目录 什么是性能测试性能指标测试模型测试种要有监控有预定条件性能测试中要有场景性能测试中有分析调优性能测试结果报告 常用的七种性能测试方法后端性能测试前端性能测试代码级性能测试压力测试配置测试并发测试可靠性测试 性能测试的四大应用领域能力验证能力规划性能调…

测试方法

一、 测试方法的分类 静态测试方法动态测试方法 1. 静态测试方法 不执行程序的测试方法。主要用于测试文档和代码&#xff08;文档&#xff09;。 2. 动态测试方法 通过运行程序来发现缺陷的测试方法。 黑盒测试方法白盒测试方法灰盒测试方法&#xff08;白 黑&#xff0…

无线网卡性能怎么测试软件,无线性能测试平台和方法

无线性能测试平台和方法 无线性能测试平台和方法 JCG JYR-N495 无线路由器 测试平台&#xff1a; 客户端&#xff1a;Thinkpad X200笔记本 450M外置无线网卡 服务器端&#xff1a;Thinkpad T400笔记本 测试软件&#xff1a;NetIQ Chariot v5.4&#xff1b;Endpoint6.0。 测试方…

银行核心业务系统性能测试方法

目录 前言 1、测试内容 2、测试方法 3、注意事项 前言 本文讨论的是基于字符终端型的银行核心业务系统。银行核心业务系统由于其复杂的业务流程&#xff0c;以及特殊的终端字符形式&#xff0c;与一般的B/S结构、C/S结构系统有较大的差异&#xff0c;其性能测试方法也存在很…

Web前端性能测试方法

今天介绍个前端性能测试的基本套路。 Web前端性能测试可以从以下几个方面入手&#xff1a; 1.页面加载性能测试&#xff1a;测试网页的加载时间&#xff0c;包括页面的首次加载、资源&#xff08;如图片、脚本、样式表等&#xff09;的加载、页面响应时间等。 2.页面渲染性能…

交换机软件测试,交换机性能测试方法

首先是看到gogogo10 在论坛回贴所提到的方法&#xff0c;才总结写出来&#xff0c;感谢gogogo10的帮助。 分为二层三层交换机的测试 测试都会用到测试仪&#xff0c;或称发包机&#xff0c;测试机&#xff0c;这个我也不太了解&#xff0c;所以这里就不提&#xff0c;只说说测试…

性能测试方法

备注&#xff1a;以下是常用的测试方法&#xff0c;当然我们还是要根据项目的需要而定&#xff0c;不同项目&#xff0c;不同业务&#xff0c;压测方法不同。比如长连接和短链接不同&#xff0c;协议不同&#xff0c;测试方法不同&#xff0c;大家要根据情况而定。 负载测试&a…

服务器性能测试方法,服务器性能测试方法

服务器性能测试方法 内容精选 换一换 登录Windows云服务器时,系统报错,错误代码为“0x112f”,如图1所示。云服务器内存不足。方法一(推荐):变更规格,升级云服务器的CPU、内存大小。变更规格的方法,请参见变更规格(CPU和内存)。变更规格,升级云服务器的CPU、内存大小。变…

功能测试的方法

1.等价类划分法&#xff1a; 等价类划分法是把所有可能的输入划分成若干部分&#xff08;子集&#xff09;,然后从每一个子集中选取具有代表性的数据作为测试用例。 有效等价类&#xff1a;有效等价类指对于程序规格说明来说&#xff0c;是合理的、有意义的输入数据构成的集合。…

功能测试的6种方法

功能测试是软件测试中最基础、最常见的测试方法之一&#xff0c;它通过一系列测试用例对软件系统的各项功能进行验证&#xff0c;以发现潜在的缺陷和问题点。 下面我们来介绍一下常见的六种功能测试方法。 1. 黑盒测试法 黑盒测试法也称为功能测试法&#xff0c;它主要从用户…

aes256位加密_AES加密256位

aes256位加密 AES (Advanced Encryption Standard) is the most widely used symmetric encryption algorithm. AES is used in a wide array of applications that include the encryption of data at rest, and secure file transfer protocols like HTTPS. AES(高级加密标准…

mysql aes256_pl/sql:aes256加密解密

调用相应的API对BLOB数据 相应的加密和解密 PL/SQL 加密解密 --加密function encrypt_aes256 (p_blob in blob, p_key in varchar2) return blobas l_key_raw raw(32); l_returnvalue blob;begin /* Purpose: encrypt blob Remarks: p_key should be 32 charac 调用相应的API对…

aes 256 cbc java,AES256加解密java语言实现

AES256加解密java语言实现 写在前面 基于项目安全性需要,有时候我们的项目会使用AES 256加解密算法。以下,是针对实现AES256 Padding7加密算法实现的关键步骤解析以及此过程遇到的一些问题总结。 一些概念 对称加密算法 加密和解密用到的密钥是相同的,这种加密方式加密速度非…

【AES256】Java实现AES256加解密

AES256加解密比较常见&#xff0c;这里简单记录以供参考&#xff01; 一、下载 官方JDK默认支持AES-128&#xff0c;在 1.8.0_151 和 1.8.0_152 版本之前&#xff0c;需要从Oracle官网下载安全JAR包方可支持AES-256&#xff0c;之后版本则可以通过在运行环境中设置以下属性启用…

密码算法详解——AES(高级加密算法)

0 AES简介 美国国家标准技术研究所在2001年发布了高级加密标准&#xff08;AES&#xff09;。AES是一个对称分组密码算法&#xff0c;旨在取代DES成为广泛使用的标准。 根据使用的密码长度&#xff0c;AES最常见的有3种方案&#xff0c;用以适应不同的场景要求&#xff0c;分别…

AES加密算法(带示例)

原创不易&#xff0c;转载请注明出处。 目录 1.算法简介 2.算法流程 2.2 轮密钥加 2.3 字节代替 2.4 行位移 2.5 列混淆 3.总结 附录A 运算示例 附录B 下载链接 1.算法简介 高级加密标准&#xff08;英语&#xff1a;Advanced Encryption Standard&#xff0c;缩写&…

tinyproxy一直报错,无法连接

需要关闭防火墙 延迟0.2秒在启动&#xff0c;在一个配置文件

centos 安装tinyproxy 代理

安装 (服务器ip 33.22.33.22) yum -y install tinyproxy配置文件 /etc/tinyproxy/tinyproxy.conf User root Group root Port 8888 Timeout 600 DefaultErrorFile "/usr/local/tinyproxy/share/tinyproxy/default.html" StatFile "/usr/local/tinyproxy/sha…