英文字符不换行，汉字可以，你需要这个css样式

最新推荐文章于 2024-04-15 11:02:30 发布

原创最新推荐文章于 2024-04-15 11:02:30 发布 · 置顶 · 2.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#英文换行 #word-wrap # #white-space #省略号显示

CSS相关问题专栏收录该内容

1 篇文章

订阅专栏

探讨CSS中white-space、word-break与word-wrap属性在英文与汉字自动换行上的差异及应用，解决长字符串换行难题。

今天遇到一个问题，在对话页面，输入aaaaaa…，一直到100（最多100）个字符，发送之后，发现超过了对话框的长度，没有换行，数字也是一样，但是输入100个汉字，就可以自动换行。
在这里插入图片描述

在F12里查看对话框的样式，是用white-space: normal来控制换行，默认是normal，
一长串英文字符（中间没空格）不会自动换行，比如：sssssssssssssssssssss…不能处理自动换行，而汉字字符却可以自动换行。原因是：

英文字母之间如果没有空格，系统认为是一个单词，就不会自动换行。汉字就没有这种情况。

对于这种情况，要使用断词属性word-break:brrak-all，或者换行属性word-wrap:break-word,
在这里插入图片描述

word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句(换行)，不同点是word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；而word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。
输入ddddddddddd ssssssssssssssssssssss…，分别用两种属性，区别如下：
word-wrap:break-word:
在这里插入图片描述
word-break:break-all:

具体属性如下：

这里贴出white-space的属性
在这里插入图片描述
主要用的就是着两种，normal会忽略空白，打多个空格只显示一个，nowrap是强制不换行，经常用于单元格长度过长时，用省略号显示，下面三个属性一起使用。

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

超出隐藏（overflow:hidden;）
强制在同一行显示（white-space: nowrap;）
省略号（text-overflow:ellipsis;）