纯css 实现类型朋友圈的文本超过多行显示“全文”按钮效果

这是效果

 

文本只有超过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>

.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模式可以，网上有相关的文章

原文：https://juejin.cn/post/7376425155323281443