11、多行文本最后一行顯示省略號並截取文本字數（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數組

最后實現效果如圖：