聊聊css中文字的换行问题

这是我参与更文挑战的第28天，活动详情查看：更文挑战

事情还要从测试发现的一个伪bug说起，他说在配置公告之后，文字过多的时候没有换行，却溢出了视窗。这怎么可能呢？我自测的时候可是明明白白一点问题也没有，怎么一到测试那里就有问题了？肯定是测试的问题。

结果测试发来一张截图，我都要气笑了，好歹复制点文字啊，这满屏的aaaaa...算什么公告？

然后我义正言辞的告诉测试，没有哪个公告长这个样子，正常情况下不会出现这样的情况。因为浏览器把这一串字母当作一个单词来解析了，单词怎么能从中间换行呢？就好像一个汉字，怎么可能从中间分两半展示呢？没有这么长的单词，拜托你不要乱测了~ 测试说不排除有这种极端情况（实际上根本就没有好吗），并且之前他合作的前端就能处理，巴拉巴拉......

好了，改就改吧，其实不就是一行css代码的问题嘛！改完之后我们今天就顺便来谈一下css中的换行问题~

white-space 处理元素中的空白

关于css中的换行，其实应用还是蛮广泛的，比如一行文本溢出省略号表示，就用到了 white-space: nowrap; 来禁止文本换行。其实很多人不知道的是， white-space 属性更多是用于处理元素中的空白符。

white-space 属性值如下：

normal 默认。空白会被浏览器忽略。

pre 文本不会换行，空白会被浏览器保留。其行为方式类似 HTML 中的

标签。可以不再写也能达到保留空格的效果。

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。

pre-wrap 文本会换行，保留空白符序列。

pre-line 文本会换行，合并空白符序列。

inherit 规定应该从父元素继承 white-space 属性的值。

这其中，值得一提的是pre和pre-wrap两个属性值，它们都会保留文本中的空格，不过从换行的角度来看：一个换行，一个不换行。我们写段代码来实际测试一下：

    <style>
        .box{
            width: 288px;
            height: 300px;
            border: 2px solid #333;
        p:nth-child(1){
            white-space: pre;
        p:nth-child(2){
            white-space: pre-wrap;
    </style>
    <div class="box">
        <p>大家好，我是        南极大冰块，欢迎你来读我的博客，如果喜欢的话        请点个赞，关注一下我，一起来学习更多好玩的前端知识！</p>
        <p>大家好，我是        南极大冰块，欢迎你来读我的博客，如果喜欢的话        请点个赞，关注一下我，一起来学习更多好玩的前端知识！</p>
    </div>
运行效果如下图：
可以看出white-space属性还是很强大的，保留文本中的空格在有些时候能够做一些令人意想不到的效果哦~
text-wrap 文本的换行规则
text-wrap属性值如下：
normal	只在允许的换行点进行换行。
none	不换行。元素无法容纳的文本会溢出。
unrestricted	在任意两个字符间换行。
suppress	压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。
同样的，我们用代码实现看一下：
    <style>
        .box{
            width: 288px;
            height: 300px;
            border: 2px solid #333;
        p:nth-child(1){
            text-wrap: normal;
        p:nth-child(2){
            text-wrap: none;
        p:nth-child(3){
            text-wrap: unrestricted;
        p:nth-child(4){
            text-wrap: suppress;
    </style>
    <div class="box">
        <p>大家好，我是        南极大冰块，欢迎你来读我的博客，如果喜欢的话        请点个赞，关注一下我，一起来学习更多好玩的前端知识！</p>
        <p>大家好，我是        南极大冰块，欢迎你来读我的博客，如果喜欢的话        请点个赞，关注一下我，一起来学习更多好玩的前端知识！</p>
        <p>大家好，我是        南极大冰块，欢迎你来读我的博客，如果喜欢的话        请点个赞，关注一下我，一起来学习更多好玩的前端知识！</p>
        <p>大家好，我是        南极大冰块，欢迎你来读我的博客，如果喜欢的话        请点个赞，关注一下我，一起来学习更多好玩的前端知识！</p>
    </div>
运行效果如下图：
看到这，你一定很好奇，为什么看起来一摸一样？这是因为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;则会先另起一行，如果还是排不下才会从单词中间截断。
来看下代码：
    <style>
        .box{
            width: 288px;
            height: 300px;
            border: 2px solid #333;
        p:nth-child(1){
            word-break: break-all;
            background-color: rgb(255, 176, 176);
        p:nth-child(2){
            word-wrap: break-word;
            background-color: rgb(176, 188, 255);
    </style>
    <div class="box">
        <p>From tomorrow on, langlanglanglanglanglanglanglanglanglanglanglanglanglanglanglanglanglang I will be a happy person; Grooming, chopping, and traveling all over the world. From tomorrow on, I will care foodstuff and vegetables, I have a house,towards the sea, with spring flowers blossoming.</p>
        <p>From tomorrow on, langlanglanglanglanglanglanglanglanglanglanglanglanglanglanglanglanglang I will be a happy person; Grooming, chopping, and traveling all over the world. From tomorrow on, I will care foodstuff and vegetables, I have a house,towards the sea, with spring flowers blossoming.</p>
    </div>
运行效果如下图：
word-wrap 对长单词进行截断换行
在前言中的例子里，我们就可以使用word-wrap：break-word来实现截断换行，这么做的目的就是不那么暴力，能尽量让长单词完全的显示出来。word-wrap属性值如下：
normal	只在允许的断字点换行（浏览器保持默认处理）
break-word	允许在长单词或 URL 地址内部截断换行
word-wrap: break-word;上面已经举例说明了，此处就不再写了。
最后，顺便提一下<br>，毕竟<br>也是一个换行标签，值得注意的是：它开始的是新的一行，而不是一段。
虽然今天加班很晚，但还是努力更完了文，又到深夜。不知怎么的，想起了海子的《面朝大海，春暖花开》，摘抄如下，送给同样正在努力的你：
从明天起，做一个幸福的人
喂马，劈柴，周游世界
从明天起，关心粮食和蔬菜
我有一所房子，面朝大海，春暖花开
从明天起，和每一个亲人通信
告诉他们我的幸福
那幸福的闪电告诉我的
我将告诉每一个人
给每一条河每一座山取一个温暖的名字
愿你有一个灿烂的前程
愿你有情人终成眷属
愿你在尘世获得幸福
我只愿面朝大海，春暖花开
今天是我坚持日更的第二十八天，每天输出一点点，进步一点点。日拱一卒，功不唐捐。大家也要一起加油呀~
如果本文对你有帮助，别再是悄悄收藏啦！比如点个赞呀，关注大冰块呀，一起和大冰块学习更多好玩的技术博客吧~
更文挑战的文章目录如下：
2021.06.01  《多图预警！详细谈谈Flex布局的容器元素和项目元素的属性~》
2021.06.02  《如何把css渐变背景玩出花样来》
2021.06.03  《如何使用SVG制作沿任意路径排布的文字效果》
2021.06.04  《3大类15小类前端代码规范，让团队代码统一规范起来！》
2021.06.05  《团队管理之git提交规范：大家竟然都不会写commit记录？｜ 周末学习》
2021.06.06  《如何控制css鼠标样式以及扩大鼠标点击区域 ｜ 周末学习》
2021.06.07  《纯css实现：仿掘金账户密码登录时，小熊猫捂眼动作切换的小彩蛋》
2021.06.08  《从11个方面详细谈谈原型和原型链》
2021.06.09  《深入谈谈JavaScript的作用域及作用域链》
2021.06.10  《JavaScript中的闭包究竟是什么》
2021.06.11  《纯css实现：炫酷的视频文本蒙版效果》
2021.06.12  《申请一个免费的毒鸡汤api，并且用原生JS实现竖行文本的打字机效果》
2021.06.13  《纯css实现：多行文本框内的斑马条纹效果》
2021.06.14  《原生JS实现触摸滑动监听事件》
2021.06.15  《原生JS实现鼠标滚轮触发页面横向滚动》
2021.06.16  《原生JS实现跳转或刷新页面时，浏览器提示当前页面未保存》
2021.06.17  《原生JS的三大基础弹框探究》
2021.06.18  《纯css实现：固定在页面底部的按钮》
2021.06.19  《纯css实现：单行文本的打字机动画效果》
2021.06.20  《纯css实现：如何做个完美的平行四边形》
2021.06.21  《谈谈基于JS实现阻止别人调试通过控制台调试网站的问题》
2021.06.22  《纯css实现：文字被颜色逐渐填满的特效》
2021.06.23  《h5实现一个刮刮卡的动画效果》
2021.06.24  《纯css实现：文字可换行的下划线、波浪线等效果》
2021.06.25  《实现多行文字被颜色逐渐填满的特效》
2021.06.26  《纯css实现：一起来从0到1画个路灯吧》
2021.06.27  《纯css实现：理发店门口的转灯效果》