使用多行省略号时,文字重叠的解决方法

.multiple-lines-ellipsis{

  overflow: hidden;

   text-overflow: ellipsis;

     display: -webkit-box;
     -webkit-line-clamp: 5; 
    /*! autoprefixer: ignore next */    // 这是解决打包之后-webkit-box-orient: vertical;编译丢失和报警告的问题
    -webkit-box-orient: vertical;

}

用上边的属性在有的iphone手机上会出现文字重叠的现象,可能是该属性在个别机型上失效,可以尝试使用高度来解决

.multiple-lines-ellipsis{

  max-height: 2rem;  // 此时的最大高度的值一定是要经过计算出来的你要显示行数的总行高

  overflow: hidden;

   text-overflow: ellipsis;

     display: -webkit-box;
     // -webkit-line-clamp: 5;    // 此时就不需要用行数来显示了
    /*! autoprefixer: ignore next */    // 这是解决打包之后-webkit-box-orient: vertical;编译丢失和报警告的问题
    -webkit-box-orient: vertical;

}

原文地址:https://www.cnblogs.com/qianxiaoniantianxin/p/14378871.html