css多行文本省略

最近在项目中要多行文本省略，但是由于需要将元素设置为行内块级元素，无法使用webkit-line-clamp的方案，于是找到了一个方案，话不多说，放代码：

<div className='text'>稳外贸是稳增长的重要支撑。1月28日，春节后首个工作日召开的国务院常务会议强调，提高外贸竞争力。记者近期走访了解到，不少外贸企业订单激增，中欧班列、海铁联运运量明显增加。为保障企业出口货物时效，各部门高效组织运输服务，帮助更多出口商品“小步快跑”奔向海外。</div>

.text {
  width: 300px;
  position: relative;
  //line-height和height要相互配合，显示多少行就省略，就是line-height多少倍数
  line-height: 1.2em;
  max-height: 3.6em;
  // 设置文本向两侧对齐（最后一行无效）
  text-align: justify;
  // 溢出隐藏
  overflow: hidden;
}

.text:before {
  position: absolute;
  right: 0;
  bottom: 0;
  content: "...";
  // 省略号占据一个字符的空间
  width: 1em;
  // 与text的行高实际值保持一致
  height: 1.2em;
  // 设置背景和所在空间一致
  background-color: #fff;
}

.text:after {
  position: absolute;
  right: 0;
  // 和省略号宽度一致
  width: 1em;
  // 与text的行高实际值保持一致
  height: 1.2em;
  content: "";
  // 设置背景和所在空间一致
  background-color: #fff;
}

• 当文本没有超出的时候，伪类元素after和before会在元素text的右下角，且after会覆盖before，省略号隐藏
• 当文本溢出的时候，由于伪类元素before设置了bottom：0，仍然会出现在右下角，而after则会被文本挤下去，省略号展示