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数组

最后实现效果如图:

11、多行文本最后一行显示省略号并截取文本字数(vue)的更多相关文章

  1. css 多行文本的溢出显示省略号(移动端)

    多行文本的溢出显示省略号(移动端) 一.单行文本的溢出显示省略号(通用) .mui-ellipsis { overflow: hidden; /*规定当文本溢出包含元素时发生的事情*/ white-s ...

  2. CSS实现单行、多行文本超出部分显示省略号

     单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...

  3. HTML技巧篇:如何让单行文本以及多行文本溢出时显示省略号(…)

    参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...

  4. CSS控制文本的长度,超过一行显示省略号

    代码如下: <div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overfl ...

  5. CSS3——让最后一行显示省略号

    代码如下: <!DOCTYPE html> <html> <head> <title></title> <meta charset=& ...

  6. css 字数超过一行显示省略号

    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

  7. css----单行文本超出部分显示省略号

    width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

  8. 多行文本溢出显示省略号(…) text-overflow: ellipsis

    详解text-overflow 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:块级容器元素 继承性:无 动画性:否 计算值:指定值 取值: clip:当 ...

  9. css实现单行、多行文本超出显示省略号

    前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line { border: ...

随机推荐

  1. ActiveMQ传输协议

    ActiveMQ默认的传输协议是TCP 在activemq的配置文件 /conf/activemq.xml可对配置文件进行修改和查看

  2. 费马平方和定理&&斐波那契恒等式&&欧拉四平方和恒等式&&拉格朗日四平方和定理

    费马平方和定理 费马平方和定理的表述是:奇素数能表示为两个平方数之和的充分必要条件是该素数被4除余1. 1. 如果两个整数都能表示为两个平方数之和的形式,则他们的积也能表示为两个平方数之和的形式. $ ...

  3. React和Redux的开发经验之谈

    1.显示控制用state,共享数据用redux,觉得可以不用redux的就不要用 2.表单项集中的地方,推荐用高阶组件,单个表单项,不推荐用高阶组件 3.涉及对服务数据的处理,在redux的model ...

  4. three.js 加载STL文件

    注意: TrackballControls.js 和 TDSLoader.js 都引用了 three.module.js,特别注意引用的路径 比如: 直接代码咯 <!DOCTYPE html&g ...

  5. day 19

    If you think you can, you can. And if you think you can't, you're right.

  6. Ajax运用与分页

    目录 django与ajax的分页处理 ajax + sweetAlert 实现再次确认: 批量数据插入 分页: django与ajax的分页处理 ajax + sweetAlert 实现再次确认: ...

  7. bat无线热点设置

    netsh wlan set hostednetwork mode=allow ssid=happyla key=1234567890netsh wlan start hostednetwork

  8. c++primer(第五版) 阅读笔记

    快速阅读一遍c++ primer,复习c++ 1.本书代码:http://www.informit.com/store/c-plus-plus-primer-9780321714114 2.本书结构:

  9. [ASP.Net ]利用ashx搭建简易接口

    转载:https://blog.csdn.net/ZYD45/article/details/79939475 创建接口的方式有很多,像是Web api,nodejs等等 今天,主要介绍,利用ashx ...

  10. FTP服务器安装测试

    FTP服务器基本搭建 -- vsftpd 作用:文件的基本上传和下载 1.服务器端 软件的安装: $ sudo apt-get install vsftpd (1)修改配置文件 $ sudo vim ...