?

wxml

1 <view class='containers'> 2 <text class="content {{ellipsis?'ellipsis':'unellipsis'}}"> 3 飛房間卡了飛機而來發發色法爾范發瘋安峰山粉色案發前二十阿里附近發打發打發是范德薩發放就開了房間愛離開房間愛卡房間愛瘋愛瘋飛房間卡了飛機而來發發色法爾范發瘋安峰山粉色案發飛房間卡了飛機而來發發色法爾范發瘋安峰山粉色案發 4 </text> 5 <view bindtap='ellipsis'> 6 <view> 7 <button>{{ellipsis?'展開':'收起'}}</button> 8 </view> 9 </view> 10 </view> 11 12 13 <!-- 14 1. content view包裹text，一旦超出，使用css(-webkit-line-clamp)樣式來控制展開或收縮 15 2. button按鈕綁定一個事件，根據({{ellipsis}})，使之置為true或false來控制展開或收縮 16 -->

?

?

css

1 page{ 2 font-size: 30rpx; 3 } 4 5 6 .content { 7 display: -webkit-box; 8 -webkit-box-orient: vertical; 9 text-overflow: ellipsis; 10 overflow: hidden; 11 } 12 13 14 /* 修改列數 */ 15 .ellipsis { 16 -webkit-line-clamp: 3; 17 } 18 19 20 /* 展示全部 */ 21 .unellipsis { 22 -webkit-line-clamp: 0; 23 }

?

js

?

1 let _page; 2 3 Page({ 4 data: { 5 // 文字是否收起，默認收起 6 ellipsis: true 7 }, 8 /** 9 * 收起/展開按鈕點擊事件 10 */ 11 ellipsis() { 12 _page = this; 13 let value = !this.data.ellipsis; 14 _page.setData({ 15 ellipsis: value 16 }) 17 } 18 })

?

?

?

?

點擊下載示例：小程序-文字與收縮

總結

以上是生活随笔為你收集整理的微信小程序 - 文字收缩与展开的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。