单行/多行文本溢出显示省略号

---

公司商城的产品页标题很长，有时候2,3行都能难显示完全，于是用省略号替代是个不错的办法

---

单行，溢出显示省略号，这个大家应该都比较熟悉

• 单行

.ellipsis{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

多行实现起来就有些麻烦了，不过也是有办法的

• 多行 wap

.multiEllipsis{
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

不过多行的写法只适用于wap端，pc端使用时会更麻烦一点

• 多行 pc

  p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
  p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;

思路很简单，当文本超出时隐藏，然后以伪元素的'...'补充，缺点是当文本长度不够时，就算全部显示完了，后面还是会有'...'