參考文章
1、微信小程序文本展開、收起功能
2、微信小程序文字超過行后隱藏并且顯示省略號
需求描述
顯示消息內容，超出兩行部分隱藏。當有隱藏內容時，該卡片設為可點擊，進入消息詳情頁面。
代碼
1、wxml
<view class="message_content_bottom" bindtap="{{isOpen ? 'openMessageDetail' : '' }}>
<!--這里一定要是text!!!!!!!!!!!!!!!-->
<text class="content_bottom">{{content}}</text>
</view>
2、wxss文章來源：http://www.zghlxwxcb.cn/news/detail-549535.html
.message_content_bottom{
width: 100%;
font-size: 14px;
/*以下內容是文字隱藏所必須的*/
display: -webkit-box;
word-break: break-all;/*換行規(guī)則*/
text-overflow: ellipsis;/*最后使用省略號顯示*/
overflow: hidden;/*超出部分隱藏*/
-webkit-box-orient: vertical;
-webkit-line-clamp:2;/*能夠顯示幾行*/
line-height: 20px; /*行高，固定寫死。后續(xù)將會使用它*/
}
3、.js文章來源地址http://www.zghlxwxcb.cn/news/detail-549535.html
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
content:"嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟",
//記錄是否可點擊
isOpen:false
},
//主要部分：對消息進行處理-超過兩行顯示時，可以點擊進入查看詳情頁面
hidenMore(type) {
let that = this;
let isOpen = false;
const query = wx.createSelectorQuery();
query.selectAll('.content_bottom').fields({
size: true,
}).exec(function (res) {
let ress = res[0];
let lineHeight = 20 //樣式中寫死的行高，單位px
for (let i = 0; i < ress.length; i++) {
if (ress[i].height / lineHeight > 2) {
isOpen = true;
}
}
that.setData({
isOpen : isOpen
})
})
},
})
到了這里，關于微信小程序-控制文本的顯示及隱藏（當文字超出兩行時，設置為可點擊并進入查看詳情頁面）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
![[微信小程序踩坑]微信小程序editor富文本組件渲染字符串時，內部圖片超出大小導致無法正常渲染或回顯(數(shù)據(jù)傳輸長度為 3458 KB，存在有性能問題！)](https://imgs.yssmx.com/Uploads/2024/02/716301-1.png)
