如何完美的将文字控制在两行？超出如果效果显示，开始思路是控制字符长度，但是发现同一个长度，英文和汉字的个数不一样，纠结

Question

Answer 1

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

Answer 2

我开始的想法是控制字符数
$(document).ready(function(){

    //限制字符个数
    $(".article_list li p").each(function(){    
       var maxwidth=150;
       if($(this).text().length>maxwidth){
          $(this).text($(this).text().substring(0,maxwidth));
          $(this).html($(this).html()+"<span>…阅读全文</span>");
       }
    });
});
但是这个maxwidth值在中英文情况下显示效果不同，英文下120个都不会达到超出两行的要求，而中文下60个字就超出了两行

Answer 3

@mixin ellipsis($line: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

需要几行调用的时候传进去几就行了 @include ellopsis(2)
但是这个属于 webkit 的实验性功能，兼容性并不好

Answer 4

这个数据应该是在后端取出来的吧？你可以尝试一下取出来的时候先做处理再展示，其他后端语言我不懂，我用PHP的，里面的mb_strlen可以根据字符来取，其他语言不知道是否有的

Answer 5

不能通过控制字符数来达到目的，中英文长度不一致，而且英文w i 很影响长度的，还是要对你取得的那串字符所组成的宽度限制才行