white-space,word-wrap,word-break三者的区别

虽然工作也有几年了，但是每次用到white-space,word-wrap,word-break这几个属性的时候总觉得有些懵圈，傻傻分不清楚。最近有时间又重新来翻翻基础知识，想好好消化一下。

1.0.0 white-space

1.1.0 介绍

作用： 设置如何处理元素中的空白

1.2.0 取值

1.2.1 空白符的理解及浏览器的处理规则

看官方文档，老是会出现空白符，换行符，然后总是会想当然的以为是&nbsp;<br>这类的，实际上并不是，而是指代码中文本的原始格式中的空格和换行。&nbsp; <br>的作用效果不会受到white-space取值的影响。具体看下方示意图:

浏览器对于空格的处理规则是文字的前部和后部的空格都会忽略，内部的连续空格只会算作一个

1.2.2 具体取值：

针对这个属性的示例，除了white-space取值不同以外，其他代码公共部分如下所示：

html:
<div class="box">
    死去元知万事空，&nbsp;&nbsp;&nbsp;&nbsp;但悲不见九州同。
    王师北定中原日，    家祭无忘告乃翁。<br> 
    In the end, it’s not&nbsp;&nbsp;the years in your life that count. It’s the life in your years.ohhhhhhhhhhhhhhhhhhhhhh~
</div> 

css:
div {
    width: 200px;
    border: 1px solid red;
    margin: 20px;
}

• normal 默认值；连续空白符会被合并（同浏览器处理空白规则），换行符会被当做空白符来处理
  

• nowrap 连续空白符会被合并（同浏览器处理空白规则），文本内的换行无效
  

• pre 连续空白符会被保留，遇到换行符或者<br>元素才会换行（本质就是保留代码中文本的原始格式）
  

• pre-wrap 同pre,但是它会在填充line盒子时换行（本质就是保留代码中文本的原始格式，但是如果文本超出容器也会自动换行）
  

• pre-line 连续空白符会被合并（同浏览器处理空白规则），遇到换行符或者
  元素或者为了填充line盒子(触碰到容器边缘)时会换行
  

2.0.0 word-wrap | overflow-wrap

2.1.0介绍

word-wrap起初是属于微软的一个私有属性，现在被重命名为overflow-wrap

2.2.0 属性值

• normal 在正常的单词结束处换行。
• break-word 如果行内没有足够的空间容纳某个单词，那么该单词可能会被强制截断换行(如果是短单词，直接换行显示完全，如果是长单词，换行依然不能显示完全，则截断换行显示)

2.3.0 示例

html:
<div class="box1">不积跬步无以至千里，不积小流无以成江海 abcdefghijklmnopqrstuvwxyz</div>
<div class="box2">不积跬步无以至千里，不积小流无以成江海 abcdefghijklmnopqrstuvwxyz</div>

css:
<style>
    div {
        width: 150px;
        height: 200px;
        word-wrap: break-word;
        border:1px solid #ccc;
        margin: 50px auto;
    }
    .box1 {
        overflow-wrap: normal;
    }
    .box2 {
        overflow: break-word;
    }
</style>

运行结果如下：

3.0.0 word-break

3.1.0 介绍

作用： 指定了怎样在单词内断行

3.2.0 属性值

• normal 默认断行规则
• break-all 只要触碰到容器边缘就强制换行，不管是长单词还是短单词，（中/日/韩 文本除外）
• keep-all 中/日/韩 在不同的浏览器中表现不一样，其他语言的文本在不同浏览器中表现一致且表现和normal一样。(目前测试在chrome浏览器中表现为接近容器边缘的地方如果有 标点|半角空格 会换行，火狐浏览器中只有 半角空格 处换行, 中日韩文字之间不能被强制拆分换行)

3.3.0 示例

html:
   <div class="break-all">昆山玉碎凤凰叫，芙蓉泣露香兰笑。拼音是:kun shan yu sui feng huang jiao, fu rong qi lu xiang lan xiao. 去掉标点及空格之后是：kunshanyusuifenghuangjiao, furongqiluxianglanxiao</div>
    <div class="keep-all">昆山玉碎凤凰叫，芙蓉泣露香兰笑。拼音是:kun shan yu sui feng huang jiao, fu rong qi lu xiang lan xiao. 去掉标点及空格之后是：kunshanyusuifenghuangjiao, furongqiluxianglanxiao</div>
css:
    <style>
         div {
            width: 150px;
            height: auto;
            border: 1px solid #333;
            margin: 30px auto;
        }
        .break-all {
            word-break: break-all;
        }
        .keep-all {
            word-break: keep-all;
        }
    </style>

运行结果如下：

总结

• white-space 主要是控制空白字符的显示，同时也能控制是否换行。取值有 normal|nowrap|pre|pre-wrap|pre-line,最常见的应用场景就是和text-overflow配合控制超出行省略号表示

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

• word-break不同的取值在不同浏览器下面略有差异，使用break-all时不管单词长短，一旦触碰到边界就直接强制截断，可能这些并不是我们期望的结果。这时候我们就可能使用word-wrap:break-word 这个属性会更加合适一些。

• 更多的想到再补充吧~