文本省略不生效？多半是你的使用姿势不正确！

单行文本省略

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

多行文本省略

• css 实现

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  

• js 实现
  • 挨个字符相加，每增加一个字符就判断一下外层容器的大小，直到外层容器的高度超出行数限制，然后用当前的文字拼接上...字符

📢 文本省略通过 css 实现必须遵循如下两个原则：

• 外层盒子必须具有宽度（或隐式宽度，可以理解为通过继承父级宽度得到的）
• css 要添加到离文本内容最近的块级 dom 上，否则在 pc 浏览器中可以正常展示，在 ios 与 android 中无法正常展示。会出现覆盖现象或者省略号消失的问题。