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. 模板语言、url

    伪造一个数据库全局变量 (字典无序) USER_LIST 列表变字典(元祖和列表直接循环就好,字典涉及到k_v) UESR_DICT 遍历方法 1. 2. 3. 4. 5. 6.键入链接 通过a标签包 ...

  2. java添加新表,接口合成流程必看

    生成代码后 创建模块包 先放入 实体类 然后按照 Controller 改成 然后是 service  后impl 然后是mapper  后xml 然后更新 代码

  3. three.js 添加 图形控制界面 gui

    需要导入这个js: import { GUI } from '/three.js/jsm/libs/dat.gui.module.js'; 局部代码: var params = { color: 0x ...

  4. Intellij Idea 星云常用配置工具箱

    1. 软件配置篇 1.1 关闭默认打开最近的工程选项 1.2. 修改快捷键 1.3 修改字体 1.4 创建类模板 效果如下: 1.5 创建接口模板 效果同上 2. 插件篇 1.1 省略Getter a ...

  5. vue之子父组件通信

    一. 子-父组件间通信: let children = {    # 定义子组件 template: `<div> <button @click="send"&g ...

  6. [SDOI2018]物理实验 set,扫描线,旋转坐标系

    [SDOI2018]物理实验 set,扫描线,旋转坐标系 链接 loj 思路 先将导轨移到原点,然后旋转坐标系,参考博客. 然后分线段,每段的贡献(三角函数值)求出来,用自己喜欢的平衡树,我选set. ...

  7. CF1120D Power Tree(构造题,差分,最小生成树)

    很有趣的一道题. 首先可以对每个叶子进行编号.按照DFS到的顺序即可.(假设从 $1$ 到 $k$) 然后对每个点求出它管辖的所有叶子的编号.因为是DFS序所以这一定是个区间.设点 $u$ 的这个区间 ...

  8. React创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...

  9. 本地VS调试服务器 IIS 程序

    由于读书的关系,毕业后选择在武汉,工作三年,至今年5月份挪窝到沿海某二线城市,换城市相当于裸辞,一切从头开始,新的城市,新的居住地,新的空气,新工作,新挑战.一直忙忙碌碌,孜孜不倦的汲取着,担心脱队, ...

  10. 【Kubernetes学习之二】Kubernetes集群安装

    环境 centos 7 Kubernetes有三种安装方式:yum.二进制.kubeadm,这里演示kubeadm. 一.准备工作1.软件版本 软件 版本 kubernetes v1.15.3 Cen ...