单行和多行溢出显示省略号

对于文本内容，单行或者多行溢出，显示省略号，一般有两种操作方式

---

• Javascript截断操作
• Css溢出操作

---

截断操作

let str = '23048930jsldfjklsdfsdf';
str.length > 6 ? str.substr(0,6) + '...' : str;

Css操作

单行溢出

// 溢出必须要设置宽度，然后设置超出部分隐藏，用省略号代替，不换行
width: 60px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行溢出

// 设置宽度，然后超出部分隐藏，设置行数
width: 120px;
display: -webkit-box;
-webkit-box-orient: vertical;
// clamp属性并不是css的标准属性
-webkit-line-clamp: 3;
overflow: hidden;