最近面试的时候被问到通常文本省略和文本换行怎么去处理，菜鸟的我下意识就说文本省略的话设置text-overflow 属性值为 ellipsis ，文本换行的话通过设置 word-break 属性来处理。话音刚落，面试官沉默了一下，显然对我的回答不太满意。然后又问我什么情况下text-overflow什么情况下会失效呢？我说，文本换行了就失效了。接着面试官又问，那么在换行的情况下，又如何去处理呢？emmmm......
对此，也是来深入了解下与文本省略和文本换行相关的这些属性。
由于 text-overflow 在某些情况下会失效，需要配合某些属性一起使用，所以先来看看与文本换行的一些属性。
一、文本换行（white-space、word-break、overflow）
1.1 white-space
white-space 顾名思义，就是空白，严格来说该属性是用来设置如何处理元素中的空白的。
该属性有如下取值：
| 属性值 | 描述 |
|---|---|
normal | (默认值) 连续的空白符会被合并，换行符会被当作空白符来处理 |
nowrap | 连续的空白符会被合并。但文本内的换行无效。 |
pre | 连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。（preserve） |
pre-wrap | 连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充时才会换行。 |
pre-line | 连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充时会换行。 |
下面就基于以下HTML结构来详细了解下每个属性值的作用
<style>
.text {
margin: 50px
}
.text {
width: 100px;
height: 200px;
border: 1px solid black;
}
</style>
<div class="text">
这是一段测试文本 空白后的文本
第二行文本<br/>换行标签后文本
Third Line LongTextaaaaaaaa
</div>
（1）normal
noraml 是默认值，表示连续的空白字符会被合并，换行符也会被当作空白符处理。
white-space: normal;
如图所示，“这是一段测试文本 空白后的文本” 之间的空白符被合并成了，而且每一行的换行符也是当作空白符来处理了。但是 <br/> 换行标签和通过 定义的空格不会受到影响。
（2）nowrap
nowrap，顾名思义，就是不换行。即：连续的空白字符会被合并，但是文本内的换行无效。
white-space: nowrap
如下图所示，与normal的主要区别在于，当文本到达盒子边界时，文本不会自动换行。但是遇到<br/>标签仍然会换行。
（3）pre
pre其实是单词 preserve（保留） 的缩写，这样一来就比较容易理解了。即：连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行
white-space: pre
如图所示，所有的空白字符都保留了，而且文本遇到换行符时会换行，不会当作空白字符处理。当文本到达盒子边界时并不会自动换行。
（4）pre-wrap
pre-wrap可以理解为 pre + wrap，与 pre 不同的在于当文本到达盒子边界时会自动换行。
white-space: pre-wrap
（5）pre-line
pre-line 与 pre-wrap 不同的在于，pre-line 会合并空白字符。（需要注意的是，pre-line 也不会将换行符当作空白符处理）
white-space: pre-line
其实还有个break-space属性，但是需要比较高版本的浏览器才能兼容，所以暂且引用MDN上的一段介绍：
break-spaces与pre-wrap的行为相同，除了：
- 任何保留的空白序列总是占用空间，包括在行尾。
- 每个保留的空格字符后都存在换行机会，包括空格字符之间。
- 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。
对 white-space 不同值的行为总结如下：
| 换行符 | 空格和制表符 | 文字换行 | 行尾空格 | |
|---|---|---|---|---|
normal | 合并 | 合并 | 换行 | 删除 |
nowrap | 合并 | 合并 | 不换行 | 删除 |
pre | 保留 | 保留 | 不换行 | 保留 |
pre-wrap | 保留 | 保留 | 换行 | 挂起 |
pre-line | 保留 | 合并 | 换行 | 删除 |
break-spaces | 保留 | 保留 | 换行 | 换行 |
有关什么时候文本会自动换行，可参考该文档：www.w3.org/TR/CSS2/vis…
1.2 word-break
1.1 中的 white-space 主要是对空白字符的处理，遇到换行符时如何处理，以及文本到达边界时是否自动换行等。 那么接下来的 word-break 属性就是用于指定怎样在单词内断行。
word-break 属性的值如下所示：
| 属性值 | 描述 |
|---|---|
normal | （默认值）使用默认的断行规则 |
break-all | 对于 non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行 |
keep-all | CJK 文本不断行。Non-CJK 文本表现同 normal。 |
break-word | 在空格处断行（已弃用） |
那么基于下面代码来详细了解一下word-break。
（1）normal
默认值，使用默认的断行规则。
（2）keep-all
CJK 文本不断行。Non-CJK 文本表现同 normal。
word-break: keep-all
如下图所示，中文和日语文本都没有断行，但是遇到空格会断行。可以理解为保持所有单词不拆分，因此连续的 CJK 文本也会被当作一个单词，不会被拆分。或者也可以理解为，遇到空格才会换行。
（3）break-all
break-all：不论什么语言，只要文本碰到边界就换行。对于英文，会从单词中间将单词断开。
word-break: break-all
（4）break-word
break-word：其实就是对于CJK 文本遇到边界就换行，而非CJK 文本，只有遇到单行放不下的单词时会分割。
word-break: break-word
1.3 overflow-wrap
overflow-wrap是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。是由 word-wrap 属性转换而来。
word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。
overflow-wrap 属性值如下所示：
| 属性值 | 描述 |
|---|---|
normal | 行只能在正常的单词断点处中断（例如两个单词之间的空格） |
break-word | 表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。 |
（1）normal
在正常单词断点处中断
overflow-wrap: normal
（2）break-word
当某个很长的单词到达边界时，会被强制分割。（该属性常会用到）
overflow-wrap: break-word
二、文本省略（text-overflow）
text-overflow 属性用于确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号（“…”）或显示一个自定义字符串。
text-overflow 属性可能被赋予一个或者两个值。
- 如果赋一个值，指的行末溢出行为（从左至右的文本右末端，从右至左的文本左末端）。
- 如果赋两个值，第一个值指定行左端溢出行为，第二个值指定行右端溢出行为。
text-overflow 属性的值如下所示，
| 属性值 | 描述 |
|---|---|
clip | 默认值，这个关键字会在内容区域的极限处截断文本，因此可能会在单词的中间发生截断 |
ellipsis | 这个关键字会用一个省略号（'…'）来表示被截断的文本。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小以至于连省略号都容纳不下，那么这个省略号也会被截断。 |
string | 用来表示被截断的文本(实验阶段) |
clip
ellipsis
有关文本溢出处理，本文主要关注两点
（1）text-overflow 什么时候生效
text-overflow 只有在单行文本超过边界的时候设置才会生效，所以必须配合以下两个属性一起使用。
white-space: nowrap;
overflow-x: hidden;
（2）如果是多行文本，那么如果进行文本省略呢？
有关这个问题，也是参考一位大佬的想法。
既然text-overflow只能用于单行文本的情况，那么多行文本的时候当然就失效了。其实我们可以：
- 首先获取内容区域的宽度
- 然后计算内容区文本的总长度
- 将文本总长度除以内容区域宽度，预估文本需要多少行
- 然后自定义每一行放置哪些文本（即如何分割文本）
- 自定义要显示的行数，然后在最后一行对省略符号（自定义）进行拼接
这样也就实现多行文本的省略。
因为是大佬的想法，这里就不贴代码了，提供一个思路供大家参考。或许还有更好的方法，也欢迎大家交流。
好了，本文到这就结束啦！
