css 多行省略号兼容移动端

时间：2020-12-27 21:40:00

浏览器兼容css样式

-webkit-line-clamp: ;

    display: -webkit-box;

    overflow: hidden;

    text-overflow: ellipsis;

    text-overflow: -o-ellipsis-lastline;

    line-clamp: ;

    -webkit-box-orient: vertical;

css 样式在移动端不兼容

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

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

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

相关文章