聊聊 css 中文字的换行问题
前言
事情还要从测试发现的一个伪 bug 说起，他说在配置公告之后，文字过多的时候没有换行，却溢出了视窗。这怎么可能呢？我自测的时候可是明明白白一点问题也没有，怎么一到测试那里就有问题了？肯定是测试的问题。
结果测试发来一张截图，我都要气笑了，好歹复制点文字啊，这满屏的 aaaaa...算什么公告？
然后我义正言辞的告诉测试，没有哪个公告长这个样子，正常情况下不会出现这样的情况。因为浏览器把这一串字母当作一个单词来解析了，单词怎么能从中间换行呢？就好像一个汉字，怎么可能从中间分两半展示呢？没有这么长的单词，拜托你不要乱测了~测试说不排除有这种极端情况（实际上根本就没有好吗），并且之前他合作的前端就能处理，巴拉巴拉......
好了，改就改吧，其实不就是一行 css 代码的问题嘛！改完之后我们今天就顺便来谈一下 css 中的换行问题~
white-space 处理元素中的空白
关于 css 中的换行，其实应用还是蛮广泛的，比如一行文本溢出省略号表示，就用到了white-space: nowrap;来禁止文本换行。其实很多人不知道的是，white-space属性更多是用于处理元素中的空白符。
white-space属性值如下：
normal 默认。空白会被浏览器忽略。
pre 文本不会换行，空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。可以不再写 也能达到保留空格的效果。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 文本会换行，保留空白符序列。
pre-line 文本会换行，合并空白符序列。
inherit 规定应该从父元素继承 white-space 属性的值。
这其中，值得一提的是pre和pre-wrap两个属性值，它们都会保留文本中的空格，不过从换行的角度来看：一个换行，一个不换行。我们写段代码来实际测试一下：
运行效果如下图：
可以看出white-space属性还是很强大的，保留文本中的空格在有些时候能够做一些令人意想不到的效果哦~
text-wrap 文本的换行规则
text-wrap属性值如下：
normal 只在允许的换行点进行换行。
none 不换行。元素无法容纳的文本会溢出。
unrestricted 在任意两个字符间换行。
suppress 压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。
同样的，我们用代码实现看一下：
运行效果如下图：
看到这，你一定很好奇，为什么看起来一摸一样？这是因为text-wrap已经被废弃了！我竟然一直以为它还能生效来着，嗐~
word-break 非中日韩文本的换行规则
word-break主要针对的是字母单词的文本，对中文使用意义不大。
word-break属性值如下：
normal 使用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行
这里我们着重看一下break-all的使用，它和下面的word-wrap: break-word;实现效果好像是相同的，但其实还是有差别的，word-break: break-all;比较暴力，剩余空间排着排着，排到盒子的边，排不下了，立马把整个单词从这个地方断掉。而word-wrap: break-word;则会先另起一行，如果还是排不下才会从单词中间截断。
来看下代码：
运行效果如下图：
word-wrap 对长单词进行截断换行
在前言中的例子里，我们就可以使用word-wrap：break-word来实现截断换行，这么做的目的就是不那么暴力，能尽量让长单词完全的显示出来。word-wrap属性值如下：
normal 只在允许的断字点换行（浏览器保持默认处理）
break-word 允许在长单词或 URL 地址内部截断换行
word-wrap: break-word;上面已经举例说明了，此处就不再写了。
最后，顺便提一下<br>，毕竟<br>也是一个换行标签，值得注意的是：它开始的是新的一行，而不是一段。
后记
今天也是要加班的一天，不知怎么的，想起了海子的《面朝大海，春暖花开》，摘抄如下，送给同样正在努力的你：
从明天起，做一个幸福的人喂马，劈柴，周游世界从明天起，关心粮食和蔬菜我有一所房子，面朝大海，春暖花开从明天起，和每一个亲人通信告诉他们我的幸福那幸福的闪电告诉我的我将告诉每一个人给每一条河每一座山取一个温暖的名字愿你有一个灿烂的前程愿你有情人终成眷属愿你在尘世获得幸福我只愿面朝大海，春暖花开
版权声明: 本文为 InfoQ 作者【南极一块修炼千年的大冰块】的原创文章。
原文链接:【http://xie.infoq.cn/article/ae8db3b3e7aca39f1fd77710e】。文章转载请联系作者。
还未添加个人签名 2022.07.01 加入
还未添加个人简介
评论