这是效果

文本只有超过5行才显示，一开始直接跟产品说做不了，想着要通过canvas做计算，列表做这个计算太费性能了，

兼容webview 跟 skyline渲染引擎

 <view class="text-container">
    <text class="text overflow5 text1" overflow="ellipsis" max-lines="5" wx:if="{{item.post.content}}">{{item.post.content}}</text>
    <text class="text overflow6 text2" overflow="ellipsis" max-lines="6" wx:if="{{item.post.content}}">{{item.post.content}}</text>
    <text class="all">全文</text>
</view>



css

    
.text-container {
    margin-top: 16rpx;
    position: relative;
    overflow: hidden;
    line-height: 44rpx;


    .text1 {
        position: absolute;
        top: 0;
        width: 100%;
    }


    .text2 {
        opacity: 0;
    }


    .all {
        position: absolute;
        top: 220rpx;
        color: #5A689B;
    }
}

父级使用relative定位  两个text 一个用来显示 使用 absolute 定位 并且显示5行，另一个用来撑开父节点的高度，显示6行，多一行是用来显示这个 “全文” 按钮的，然后“全文”按钮也是使用absolute定位，固定在第六行的位置，父节点增加 overflow:hidden;这样当不足6行时，“全文”按钮实际也会显示，只是在父节点外被隐藏了，如果文本有6行，“全文”按钮就刚好在底部。

另一种效果

实现这种需要使用浮动，不过小程序的skyline不支持float布局，目前想不到好的方法实现，webview模式可以，网上有相关的文章