<view class='special'>
<view class="view_jianjie {{ellipsis?'ellipsis':'unellipsis'}}">
这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容
</view>
<view class='xiala_btn' bindtap='ellipsis'>
<image class='xiala' src="{{ellipsis?'/images/icon_xiala2.png':'/images/icon_xiala.png'}}"></image>
</view>
css:
.special{
display: flex;
flex-direction: column;
}
.view_jianjie{
width: 460rpx;
padding-left: 20rpx;
font-size: 26rpx;
color: #333;
line-height: 45rpx;
display: -webkit-box;
-webkit-box-orient:vertical;
text-overflow: ellipsis;
overflow:hidden; /*通过以上四行实现收缩功能 */
}
.xiala_btn{
text-align: right;
}
.xiala {
width: 20rpx;
height: 12rpx;
padding: 5rpx;
}
/* 展开收缩 */
.ellipsis{
-webkit-line-clamp:3;
}
.unellipsis{
-webkit-line-clamp:0; /*全部显示*/
}
js:
data: {
ellipsis: true, // 文字是否收起,默认收起
},
/**
* 收起/展开按钮点击事件
*/
ellipsis: function () {
this.setData({
ellipsis: !this.data.ellipsis
})
},