[分享]css两行字多余省略号

在CSS中，我们经常使用省略号来显示过长的文本，但有时候会出现两行字的情况:

 .text {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     /* 此处省略其他属性 */
  } 

这时候会出现两行文字，但只有第二行出现了省略号，显得有些奇怪。这是因为在CSS中，多余的省略号只会在最后一行出现。

解决这个问题的方法也很简单，只需要在硬换行（<br>）之后插入一个零宽空格即可。

代码如下：

 .text {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     line-height: 1.5em;
     max-height: 3em; /* 此处根据行高和行数计算，需要根据实际情况调整*/
  }
  .text::after {
     content: "200B";
     display: inline-block;
     width: 0;
     height: 0;
  } 

这样就可以完美解决两行字多余省略号的问题了。