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）