vue实现兼容ie浏览器的多行省略组件

ps：不想看内容的朋友，滑倒最下面直接使用封装好的组件。

开始正题

在我们开发过程中经常会遇见在一定区域内展示超多文字，这样会导致我们的页面样式变形。一般情况我们都是对超出区域的内容做省略处理。当然我们的css直接就帮我们解决了这样的问题。具体实现如下：

单行省略

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

多行省略

.ellipsis{
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

万一我们的多行省略要兼容万恶的IE浏览器时，css就不能帮助我们的快速实现，我们只有自己写一个多行省略的组件来满足我们需求。在这里提供几种思路：

1.色块阻挡

如果文本的背景是纯色的话，我们可以把父级的高度限定死，加上overflow：hidden，和background属性来构建一个视觉上的超出部分省略效果。
优点： 简单，快速，UI效果也很不错
缺点：背景不能为渐变或者背景图片

2. padding-right阻挡

如果背景是渐变/图片，父元素用padding-right 和 overflow属性也能勉强达到这个效果。
优点是简单，快速。
缺点也很明显，padding-rright部分一直为空白（蓝色区域之上）
所以对UI要求比较严格的不适合这种方案。如图所示

3.计算字体个数

因为英文，中文，数字，符号等字符在相同fontSize下实际所占的宽度像素不一致所以不能单纯的用（字符串长度 * fontSize）来计算。我这里是用的canvas的 measureText() 计算字符的真实长度。
这种方法解决了上面两种方法的缺点，跟chrome那些浏览器的多行省略效果差不多，就是计算起来可能有点复杂。

这里有个坑点，div的宽度并不是真实的文字容器宽度，什么意思呢？假设都是中文的情况下div宽度为100px里面的fontsize为25px 那么真实容器宽度就是100px。因为4个字刚好占满了100px。如果fontsize为26px那么真实容器宽度就肯定不是100px。因为第四个字已经超过div的100px宽所以真实容器宽度为78。为了更直观的展示给大家看个图，图中span标签表示真实容器宽度。

所以我们要用真实容器宽度作为基点去计算。
比如超过三行就是省略 。 三行文字的实际长度为78*3 而不是 100 * 3。

基于最后一种方法写了一个vue组件方便大家在有兼容IE的时候用。

npm i vue-ellipsis-ie -S

· import { MutiEllipsis } from "vue-ellipsis-ie";
在组件中直接使用components: { MutiEllipsis }

 在main.js中
import MutiEllipsis from "vue-ellipsis-ie";
Vue.use(MutiEllipsis);
在任意组件中使用： <MutiEllipsis text="text" :maxLine="9"></MutiEllipsis>

github地址

如果好用请大家一件三联（start）
完结~撒花 🌻