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

11、多行文本最后一行显示省略号并截取文本字数(vue)的更多相关文章
- css 多行文本的溢出显示省略号(移动端)
多行文本的溢出显示省略号(移动端) 一.单行文本的溢出显示省略号(通用) .mui-ellipsis { overflow: hidden; /*规定当文本溢出包含元素时发生的事情*/ white-s ...
- CSS实现单行、多行文本超出部分显示省略号
单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...
- HTML技巧篇:如何让单行文本以及多行文本溢出时显示省略号(…)
参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...
- CSS控制文本的长度,超过一行显示省略号
代码如下: <div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overfl ...
- CSS3——让最后一行显示省略号
代码如下: <!DOCTYPE html> <html> <head> <title></title> <meta charset=& ...
- css 字数超过一行显示省略号
display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
- css----单行文本超出部分显示省略号
width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
- 多行文本溢出显示省略号(…) text-overflow: ellipsis
详解text-overflow 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:块级容器元素 继承性:无 动画性:否 计算值:指定值 取值: clip:当 ...
- css实现单行、多行文本超出显示省略号
前言:项目中我们经常遇到这种需求,需要对单行.多行文本超出显示为省略号.这篇文章主要总结了小编解决此问题的方法,有不足之处欢迎大家指正. 单行文本省略 .ellipsis-line { border: ...
随机推荐
- 01-docker入门-安装docker
注意: ubuntu 安装 docker前提是要替换好 Ubuntu 的安装源. 安装步骤: P1: 正常开始 sudo apt-get update sudo apt-get -y insta ...
- Tomcat8 访问 manager App 失败
Tomcat8 访问 manager App 失败 进入 tomcat 8 的下面路径 修改 上面 的 context.xml 注释了下面的框框 保存退出.重启tomcat
- 积性函数与Dirichlet卷积
转载自https://oi-wiki.org/math/mobius/ 积性函数 定义 若 $gcd(x,y)=1$ 且 $f(xy)=f(x)f(y)$,则 $f(n)$ 为积性函数. 性质 若 $ ...
- 解决.Net Core 3.0 不支持 Autofac 问题
Program.cs using System; using System.Collections.Generic; using System.Linq; using System.Threading ...
- 动态sql和分页
Mybatis动态SQL If.trim.foreach BookMapper /** * 如果形参要在mapper.xml中使用需要加上面注解 * map.name: zs age: 12 * @p ...
- C/C++ 交换两个数,不使用第三个变量, 函数模板来实现
#include <iostream> template<typename T> void exchangeTwoNumber(T &t1, T &t2): v ...
- 【2019年05月07日】A股最便宜的股票
新钢股份(SH600782) - 当前便宜指数:193.2 - 滚动扣非市盈率PE:2.99 - 滚动市净率PB:0.87 - 动态年化股息收益率:1.68%- 新钢股份(SH600782)的历史市盈 ...
- Keras 中的 verbose 参数
在 fit( ) 和 evaluate( ) 中 都有 verbose 这个参数,但都是表示日志显示的参数. 具体如下: fit( ) 中 的 verbose 参数: verbose:日志显示ver ...
- [教程]K8Cscan调用外部程序(Win/Linux批量上控/执行多条命令/保存结果)
0x000 调用原理 Cscan调用外部程序有两种方式,一是编写DLL,二是配置文件 编写DLL文件对于不懂编程的人来说可能会很难(虽然支持各语言) 由于考虑到很多人不会编程或会编程又急用无法短时间转 ...
- Zookeeper connection loss leads to Flink job restart
Flink可以使用zookeeper来进行ha,而一般我们都会使用zookeeper的高级api架构curator来对zk进行通讯.在curator中引入了状态的概念,包括connected,reco ...