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: ...
随机推荐
- 仿照addCleanup 在unittest中清理addSetupclass资源
addCleanup的用例这里不介绍了,可以看我的另一编文章: python unittest框架中addCleanup函数详解 但如果有下面这种场景,还是会遗留大批理资源 在setUpClass注入 ...
- USACO Party Invitations
洛谷 P3068 [USACO13JAN]派对邀请函Party Invitations 洛谷传送门 JDOJ 2343: USACO 2013 Jan Silver 3.Party Invitatio ...
- Http请求头中 X-Requested-With
String requestedWith = ((HttpServletRequest) request).getHeader("X-Requested-With"); 如果 re ...
- python基础之五:dict 字典
1.数据类型的划分:可变数据类型.不可变数据类型 不可变的有:元组(tuple).字符(str).整型(int).布尔型(bool) 它们都可以哈希 可变的:列表(list).set.字典(dict) ...
- python基础之二:占位符、格式化输出、while else 、逻辑运算
1.占位符和格式化输出 示例代码 #格式化输出 # % s d # name = input('请输入姓名') # age = input('请输入年龄') # height = input('请输入 ...
- OpenCV 学习笔记(14)为轮廓创建边界旋转框和椭圆
https://docs.opencv.org/3.4/de/d62/tutorial_bounding_rotated_ellipses.html 不旋转 #include "opencv ...
- bootstrap基础自我总结
*今天自学了一些封装的css,看起来官网很强大,但是因为源码备注都是英文的情况下,还是感觉想深入有点力不从心,发现度娘没有中文手册,无奈,不过还好代码无国界,基本都是能看懂的,备注也影响不大(安慰自己 ...
- C函数之genv
函数原型: include<stdlib.h> char *getenv(char *envvar); 函数说明: getenv()用来取得参数envvar环境变量的内容.参数envvar ...
- 关于m3u8格式的视频文件ts转mp4下载和key加密问题
一,利用网站浏览器F12键,利用谷歌浏览器插件找到视频的.m3u8文件,并打开. 二,打开m3u8文件后,里面有很多.ts的链接,和key的链接. 三,保存为html文件,下载ts文件,代码如下:可加 ...
- 自动签发https证书工具 cert manager
最近cert manager进行升级,不再支持0.11以下的版本了,所以进行升级.但是发现不能直接通过更改镜像版本来升级,在Apps里的版本也是旧版本,部署后发现不支持,于是自已动手,根据文档整理了一 ...