在制作页面时，有时会出现对文本采取截断处理的需求：规定文本的长度，超出部分则截断，并以省略号...替代
1、单行文本的截断
单行文本的截断需要用到的主要的一个属性是：text-overflow
text-overflow: clip | ellipsis | string
| 属性值 | 描述 |
|---|---|
| clip | 修剪文本 （默认值，无其他省略标记） |
| ellipsis | 显示省略符号来代表被修剪的文本 |
| string | 使用给定的字符串来代表被修剪的文本。（大多数浏览器不支持，仅Firefox9及以上支持） |
当然，仅仅使用这个属性是无法实现效果的，单行文本实现截断效果，就需要使文本不能换行（white-space: nowrap;），同时，将文本超出部分隐藏掉（overflow：hidden;），最后再使用 text-overflow: ellipsis;（文本溢出时显示省略号标记...）。
示例代码如下：
.word_cut {
white-space: nowrap; /* 文本不换行 */
overflow: hidden;
text-overflow: ellipsis; /* 文本溢出时显示省略号标记... */
}
2、多行文本的截断
上面所介绍的text-overflow属性只作用于单行文本，在多行文本中是不起作用的，然而，多行文本的截断效果也是一种常见的需求。下面，整理了其中一种实现方法：
使用-webkit-line-clamp属性来实现，同时还需要与其他相关的属性配合，示例代码如下：
.word_cut {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
display: -webkit-box，表示将父级元素变为弹性盒模型
-webkit-box-orient属性，设置子元素的排列方式，horizontal（默认值，水平排列），vertical（垂直排列）
-webkit-line-clamp属性，控制文本显示的行数
从以上代码中的 -webkit- 不难发现，这只适用于webkit内核的浏览器，其他浏览器的低版本并不支持此属性，IE更是11及以下都不支持，因此，兼容性不是特别好。不过，由于移动端的浏览器多数是webkit内核，因此，此属性更适用于移动端页面。
