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. CMD窗口恢复默认设置

    CMD全称Command,是Windows系统下自带的类DOS系统,在日常工作中,有时候设置会损害CMD窗口的默认,导致浏览效果不佳,这时候需要有办法恢复到默认设置.在注册表中删除以下文件夹即可:HK ...

  2. stm32定时器频率采样的方式

    频率采样方法通常采样定时器的计数方法,在stm32中,输入捕捉模式,PWM输入模式,都是可以测试外部信号频率采样的.1.输入捕捉模式需要频繁的进中断,这个方式不太好的.如果一定要用,那么就软件上处理一 ...

  3. 洛谷 P1167 刷题

    洛谷 P1167 刷题 洛谷传送门 题目描述 noip临近了,小A却发现他已经不会写题了.好在现在离竞赛还有一段时间,小A决定从现在开始夜以继日地刷题.也就是说小A废寝忘食,一天二十四小时地刷题. 今 ...

  4. USACO Buying Feed, II

    洛谷 P2616 [USACO10JAN]购买饲料II Buying Feed, II 洛谷传送门 JDOJ 2671: USACO 2010 Jan Silver 2.Buying Feed, II ...

  5. [codevs1286]郁闷的出纳员

    题目描述 Description OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复 ...

  6. 4-OpenResty 配置 https 访问

    首先是下载证书  https://www.cnblogs.com/yangfengwu/p/11809757.html 因为咱用的 Nginx 所以 修改这个 server { listen ssl; ...

  7. Spring Boot 知识笔记(整合Mybatis续-补充增删改查)

    续上篇,补充数据库增删改查的其他场景. 一.Mapper中添加其他场景操作 package net.Eleven.demo.Mapper; import net.Eleven.demo.domain. ...

  8. nRF51822 看门狗和OTA (无线升级功能)的尴尬笔记

    很久没有记笔记了.今天要记点东西,不然以后又忘记了. 随着时代的发展,现在的SDK已经是13.0了.蓝牙5.0也就来了.废话就少说了,记笔记吧. 两年前搞过nRF51822 的无线升级功能,那时候用的 ...

  9. Android studio中怎么导入android.support.v4包

    Android studio中怎么导入android.support.v4包 1.File点击选择projectStructure选择对应的APP然后点击Dependencies 2.点击+号,点击第 ...

  10. c# 自定义按钮,渐变颜色(含中心向四周渐变,单方向渐变)

    废话不多言,直接代码: public class RoundButton : Button { bool clickBool = false; //1.设置圆形 //2.设置渐变色 //3.设置too ...