css 多行省略号兼容移动端

浏览器兼容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），所以修改为 < （可参考https://blog.csdn.net/Antoinette_Xiao/article/details/86141143）

巴特西

css 多行省略号兼容移动端

最新文章

热门文章