通过封装一个v-clamp的指令处理多行文本的溢出

  overflow: hidden;
  white-space: nowrap; //段落中文本不换行
  text-overflow: ellipsis;

但是多行文本的溢出怎么处理呢？

查了资料之后发现还是有办法的

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。

我们用一下代码即可实现：

    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
但是这样处理会遇到兼容性问题，在Firefox浏览器上就不起作用。
为了解决兼容性问题，有一个clamp.js[https://www.npmjs.com/package...]很好的解决这个问题。
为了更好的跟Vue相结合，今天我们就封装一个v-clamp的指令，来方便的解决这个问题。
// 注册一个全局自定义指令 `v-clamp`
Vue.directive('clamp', {
  // 当被绑定的元素插入到 DOM 中时……
  update: function (el, binding) {
      function clamp(element, options) {
          options = options   
关键词：通过封装一个v-clamp的指令处理多行文本的溢出