1.运用函数实现(关键内容为蓝色部分)
truncateText(内容,长度)
truncateText(text, length) {
if (!text) return;
const strippedText = text
.replace(/<\/?[^>]+(>|$)/g, "")
.replace(" ", " ");
return strippedText.length <= length
? strippedText
: strippedText.slice(0, length) + "...";//控制字符个数,对字符串进行切割且加上“..."
},
2.css实现
- 单行
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
参考网址: css white-space属性详解-CSDN博客
- 多行
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;// 使用弹性盒子布局模型显示元素,该属性在Webkit浏览器中生效。
-webkit-line-clamp: 2;//设置显示的行数为2行,超出的部分将被省略。
-webkit-box-orient: vertical;//设置弹性盒子的主轴方向为垂直方向,即元素内容按垂直方向排列。