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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

{
height: 45px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: ;
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 = ;
var str_len = ;
var str_cut = new String();
var str_len = str.length;
for (var i = ; i < str_len; i++) {
var a = str.charAt(i);
str_length++;
if (escape(a).length > ) {
//中文字符的长度经编码之后大于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个字数
let title = item.title;
let date = item.date;
return { title, content, date }; //格式化：需要返回对象数组
});
this.str = text; //将格式化的数据赋值给自定义的str[]
}
}//最后在模板中循环str数组