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. Scrapy的中间件(二)

    爬虫中间件 爬虫中间件的用法与下载器中间件非常相似,只是它们的作用对象不同.下载器中间件的作用对象是请求request和返回response:爬虫中间件的作用对象是爬虫,更具体地来说,就是写在spid ...

  2. [RN] React Native 自定义导航栏随滚动渐变

    React Native 自定义导航栏随滚动渐变 实现效果预览: 代码实现: 1.定义导航栏 NavPage.js import React, {Component} from 'react'; im ...

  3. 使用Python3进行AES加密和解密 输入的数据

    高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这个标准用来替代原先的DES, ...

  4. 开发中常用linux命令

    1.创建目录mkdir 创建目录命令,常用的参数-p,递归创建目录 [root@web01 ~]# mkdir /data [root@web01 ~]# mkdir /data/a/b mkdir: ...

  5. springcloud的Hystrix turbine断路器聚合监控实现(基于springboot2.02版本)

    本文基于方志朋先生的博客实现:https://blog.csdn.net/forezp/article/details/70233227 一.准本工作 1.工具:Idea,JDK1.8,Maven3. ...

  6. mac Sublime Text 快捷键

    mac Sublime Text 快捷键 Tab: 光标后缩进 Shift+Tab: 反缩进 cmd+P: 打开文件切换面板 cmd+/: 行注释 cmd+R: 快速列出/跳转到某个函数 双击可选中光 ...

  7. Spring Security教程(一)

    一 概要 Spring Security,这是一种基于 Spring AOP 和 Servlet 过滤器的安全框架.它提供全面的安全性解决方案,同时在 Web 请求级和方法调用级处理身份确认和授权.这 ...

  8. linux -root和文件属性、权限等

    1.默认简易安装的ubuntu没有root用户,第一次创建root密码可以使用 sudo passwd 命令设置新的root密码 zzh@ubuntu:~$ sudo passwdEnter new ...

  9. PatchMatch小详解

    最近发了两片patch match的,其实自己也是有一些一知半解的,找了一篇不知道谁的大论文看了看,又回顾了一下,下面贴我的笔记. The PatchMatch Algorithm patchmatc ...

  10. kali无法安装nvidia显卡驱动

    按照各位大神的博客安装nvidia显卡驱动一直失败,重启之后无法正常进入系统,恢复模式可以进入,一直以为自己是不是哪里步骤不对,后面来回重装了几次系统. 最后意识到虚拟机里用的是虚拟网卡,并非宿主机的 ...