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数组
最后实现效果如图: