多行文字省略（涵盖标点符号，中英文等复杂字符串）

1、最简单的就是使用css解决（最重要的是有注释的两行代码，不然打包时候会被清除）

display: block;width: 10rem;height: .9rem;;font-size: .32rem;font-weight:500;color:rgba(51,51,51,1);line-height:.45rem;overflow:hidden; text-overflow:ellipsis; display:-webkit-box; /* autoprefixer: off */ -webkit-box-orient:vertical; /* autoprefixer: on */ -webkit-line-clamp:2 // 行数

2、用JS截取，（会导致复杂字符串长度不一致）

moreTextEllipsis(data, name, len) {/*** 多出文字省略* @param {Array} data:需要切割的文字* @param {Number} len:需要保留的文字长度* @param {String} name:对应的键名*/data.map((item, index) => {if (item[name].length > len) {item[name] = item[name].slice(0, len);item[name] = item[name] + '...'}})return data},

多行文字省略（涵盖标点符号，中英文等复杂字符串）相关推荐

CSS实现单行与多行文字省略（truncation）
在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...
css强制文字换行（文字对齐）、禁止换行（文字省略）
文字换行 //只对英文起作用,以字母作为换行依据word-break: break-all; . //只对英文起作用,以单词作为换行依据word-wrap: break-word; //只对中文起作用 ...
移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画、click300ms延迟、单行和多行文字溢出省略、水平居中和垂直居中
1. H5标签之浏览器兼容性在移动端时可以放心的使用h5相关的标签但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 [兼容] 下载一个 html5shiv.min.js 文件 ...
css字太多了省略_纯CSS实现文字超过n行后省略功能
在切图阶段,经常会遇到,设计稿要求超出n行后剩余文字省略,并用...代替的需求.类似于下图单行文字单行文字时实现比较容易,使用overflow: hidden和text-overflow: ell ...
单行文字、多行文字溢出时省略号表示的多种解决方式；调整字符间距；段落首字母大写缩进效果；
文本溢出省略号表示的实现效果: 1.解决单行文字溢出: 解决方式: 在文字容器样式中添加 overflow:hidden; text-overflow:ellipsis; white-space: n ...
大小不固定的图片、多行文字的水平垂直居中
想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示. 关于图片垂直居中显示,想 ...
实现一行或多行文字溢出隐藏显示省略号
1.css控制文字只显示一行,超出部分显示省略号例如:1行后省略 <style> p{ width:300px; overflow:hidden; white-space:nowrap; ...
html中限制显示文字个数,【css/js】限制一行和多行文字数量，超出部分用省略号显示...
1. 设置一行文字显示文本数量,超出部分用-表示知识点:css3 text-overflow属性属性值描述 clip 修剪文本. ellipsis 显示省略符号来表明被修剪的文本. string ...
CSS 多行文字溢出显示省略号效果
.box1{width: 100px;/* height: 100px; */border: 1px solid #ccc;overflow: hidden;text-overflow: ellips ...
[电子书]项目储备二：用FreeType2绘制矢量字体、多行文字
[电子书]项目储备二:用FreeType2绘制矢量字体.多行文字 0 矢量字体 VS 点阵字体 1 FreeType2的介绍与基本使用 2 在LCD显示一个矢量字体,且可旋转 3 在LCD任意位置显示 ...

多行文字省略（涵盖标点符号，中英文等复杂字符串）

多行文字省略（涵盖标点符号，中英文等复杂字符串）相关推荐

最新文章

热门文章