多行省略的实现
在实际开发中，经常会遇到当文本内容比较多时，由于显示区域空间的限制，我们只需显示一部分内容，剩余的内容则用省略号（…）代替。
单行省略：
关于单行多余内容省略的实现，可以简单的通过css样式来实现：
.ellipsis{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
多行省略（css版）：
如果不考虑浏览器的兼容性，多行省略的实现，也可以通过css样式实现：
.ellipsis{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;
}
通过修改-webkit-line-clamp值就可以实现多行省略效果，该实现方式最大的问题就是浏览器兼容性问题，在chrome下可以达到想要的效果，在IE下则不生效；
多行省略（js版）：
那么关于多行省略，有没有一个兼容性比较好的实现方案？
本文提供一种利用js实现的方案，并将其抽离为一个vue指令以方便使用。
demo效果：
原理：
获取显示文本text超出限定行数时的字符对应的索引，根据索引对text进行截取并拼接‘…’替换原内容。
如下图所示，是一段内容很长的文本，现在想实现两行省略，超出两行的文字需要省略并用...代替，首先要做的就是找到第三行第一个字符对应的索引，也就是"路"这个字对应的索引，根据该索引值对文本内容进行截取并拼接...，最终替换原文本内容。
实现流程：
其中比较关键的是如何查找到超出限定行数的字符所对应的的索引，本文中我们通过新建一个新的div，按照文本原来现实样式在新建div中逐字显示文本内容，在显示过程中，实时获取新建div的高度，并将其与限定行数的高度进行比较，当新建div的高度大于限定高度时，获取当前字符对应的索引。具体实现流程如下：
1、在vue指令中，我们使用钩子函数，就很容易获取到使用指令的DOM元素，然后将文本内容保存；
2、根据限定行数以及文本渲染时的行高，可以计算出文本内容所在标签的限制高度，并对超出的内容设置隐藏；
3、新建一个div，并将文本内容所在标签的一些关键样式（宽度、行高、字体大小）设置到新的div，以方便在新的div中按照相同方式渲染文本，然后遍历文本内容，逐字添加到新的div中，并实时获取div高度，将其与限制高度进行比较，得到超出限定行