聊聊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>也是一个换行标签，值得注意的是：它开始的是新的一行，而不是一段。

后记

虽然今天加班很晚，但还是努力更完了文，又到深夜。不知怎么的，想起了海子的《面朝大海，春暖花开》，摘抄如下，送给同样正在努力的你：

从明天起，做一个幸福的人
喂马，劈柴，周游世界
从明天起，关心粮食和蔬菜
我有一所房子，面朝大海，春暖花开
从明天起，和每一个亲人通信
告诉他们我的幸福
那幸福的闪电告诉我的
我将告诉每一个人
给每一条河每一座山取一个温暖的名字
愿你有一个灿烂的前程
愿你有情人终成眷属
愿你在尘世获得幸福
我只愿面朝大海，春暖花开

今天是我坚持日更的第二十八天，每天输出一点点，进步一点点。日拱一卒，功不唐捐。大家也要一起加油呀~

如果本文对你有帮助，别再是悄悄收藏啦！比如点个赞呀，关注大冰块呀，一起和大冰块学习更多好玩的技术博客吧~