css 多行省略号兼容移动端

浏览器兼容css样式

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

css 样式在移动端不兼容

可判断移动端两行有多少文字，大于2行文字总数时截取字符串，然后添加省略号

<div class="line_clamp2">{{item.advise.length &lt; 45 ? item.advise : (item.advise.slice(0, 45) + '...') }}</div>

项目使用vue构建，该运算中若添加 < 或者 > 则eslint提示错误（eslint校验 error: invalid-first-character-of-tag-name），所以修改为 &lt; （可参考https://blog.csdn.net/Antoinette_Xiao/article/details/86141143）

转载于:https://www.cnblogs.com/1032473245jing/p/10458449.html