十一、多行文本最后一行显示省略号并截取文本字数（vue）

1.首先通过css实现多行文本显示省略号：

{
    height: 45px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

发现最后一行会占满一行，不是想要的效果：

为实现最后一行不占满，想到通过截取文本字数来实现：

eg:
data() {
    return {
      list: [
        {
          title: "标题1",
          content:
            "7月11日周三下午，融都众筹将分享我们打造开放型产品的思路，介绍我们所提供的API接口，的API接口，我们希望帮助融都我们希望帮助融都众筹的使用者们实现更多可能，也希望参与的朋友们可以一起探讨互动，我们希望帮助融都众筹的使用者们实现分享对融都众筹的宝贵建议 介绍我们所提供的AP。",
          date: "2019-6-10"
        },
        {
          title: "标题2",
          content:
            "7月12日周四下午，融都众筹将分享我们打造开放型产品的思路，介绍我们所提供的API接口，我们希望帮助融都众筹的使用者们实现更多可能，也希望参与的朋友们可以一起探讨互动，我们希望帮助融都众筹的使用者们实现分享对融都众筹的宝贵建议， 介绍我们所提供的API接口介绍我们。",
          date: "2019-6-10"
        },
        {
          title: "标题3",
          content:
            "7月13日周五下午，融都众筹将分享我们打造开放型产品的思路，介绍我们所提供的API接口，我们希望帮助融都众筹的使用者们实现更多可能，也希望参与的朋友们可以一起探讨互动，我们希望帮助融都众筹的使用者们实现分享对融都众筹的宝贵建议， 介绍我们所提供的API接口，也希望参与的朋友们可以一起探讨互动，我们希望帮助融都众筹的使用者们实现分享对融都众筹的宝贵建议， 介绍我们所提供的API接口。",
          date: "2019-6-10"
        }
      ],
      str: []
    };
  },
mounted() {
    this.dy_cutstr(); //页面加载调用截取函数
  },
methods:{
    // 截取字符串
    cutstr(str, len) {
      var str_length = 0;
      var str_len = 0;
      var str_cut = new String();
      var str_len = str.length;
      for (var i = 0; i < str_len; i++) {
        var a = str.charAt(i);
        str_length++;
        if (escape(a).length > 4) {
          //中文字符的长度经编码之后大于4
          str_length++;
        }
        str_cut = str_cut.concat(a);
        if (str_length >= len) {
          str_cut = str_cut.concat("...");
          return str_cut;
        }
      }
      //如果给定字符串小于指定长度，则返回源字符串；
      if (str_length < len) {
        return str;
      }
    },
   // 调用截取函数
    dy_cutstr() {
      let text = this.list.map((item, index) => {
        let content = this.cutstr(item.content, 200); //截取200个字数
        let title = item.title;
        let date = item.date;
        return { title, content, date }; //格式化：需要返回对象数组
      });
      this.str = text; //将格式化的数据赋值给自定义的str[] 
    }
}

//最后在模板中循环str数组

最后实现效果如图：