uni-app框架 CSS 实现超过规定字符长度显示“...”

问题

刚才在做一个样式，消息内容超过一定长度就用“…"显示，但是在uni-app框架中使用出现了一点小问题
在这里插入图片描述
部分代码：

<view class="bottom">
    <text class="uni-lastmsg">{{item.lastMsg}}</text>
   </view>

.bottom {
display:flex;
 .uni-lastmsg {
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
     }
}

总结

view标签的display不是默认为block，当我们没有设置display，是看不到效果的，所以最后我们还要设置一下display布局。

追加两行显示过后…

text-overflow: -o-ellipsis-lastline;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2; //可设置显示的行数
     line-clamp: 2;
     -webkit-box-orient: vertical;