十余年專注于網(wǎng)站建設(shè)_小程序開(kāi)發(fā)_APP開(kāi)發(fā)，低調(diào)、敢創(chuàng)新、有情懷！

全國(guó)服務(wù)熱線：400-680-9298,0791-88117053

css讀取HTML內(nèi)容實(shí)現(xiàn)方法

CSS讀取HTML LHY 2024-02-22 1418

從事小程序開(kāi)發(fā)過(guò)程中，需要實(shí)現(xiàn)通過(guò)樣式CSS讀取HTML中的內(nèi)內(nèi)容，我通過(guò)實(shí)例向大家介紹功能實(shí)現(xiàn)方法，接下來(lái)由南昌小程序開(kāi)發(fā)公司百恒網(wǎng)絡(luò)開(kāi)發(fā)工程師通過(guò)實(shí)例向大家介紹實(shí)現(xiàn)方法。

例如把更多拼接在省略號(hào)后面

當(dāng)一個(gè)人喜愛(ài)梭魚跳躍的水聲時(shí)，他是個(gè)詩(shī)人；當(dāng)他知道了這不過(guò)是強(qiáng)者追趕弱者的聲音時(shí)，他是個(gè)思想家。可是要是他不懂得這種追逐的意義所在、這種毀滅性的果所造成的平衡為什么有其必要時(shí)，他就會(huì)重<text>收起text>

view>

.r-simple::before{content:attr(data-etc); position: absolute; bottom: 0; right:0px; background: #fff; color: #999999;}

html:

<rich-text id="comment-rich-text-{{index}}"

nodes="{{ item.content }}"

class="r-content {{!!item.extendStr ? \'r-content-simple\' : \'\'}}">

rich-text>

view>

<view class="extendBtn" bindtap="extendEvent" data-index="{{index}}" wx:if="{{item.extendBtn}}">{{item.extendStr ? \'收起\':\'展開(kāi)\'}}view>

JS:

//同圖片加載完成計(jì)算文字高度

listenCommentUserAvatarLoad: function (event) {

let commentIdx = event.currentTarget.dataset.index

var query = wx.createSelectorQuery();

query.select(`#comment-rich-text-${commentIdx}`).boundingClientRect((rect) => {

if (rect != null) {

const height = rect.height

if (height > 120) { //Line-height 24 * 5 行

this.data.dataList[commentIdx][\'extendStr\'] = true;

this.data.dataList[commentIdx][\'extendBtn\'] = true;//是否顯示展開(kāi)按鈕

this.setData({

dataList: this.data.dataList

})

}

}).exec()

//展開(kāi)事件

extendEvent:function(event){

let commentIdx = event.currentTarget.dataset.index

let curItem = this.data.dataList[commentIdx];

this.data.dataList[commentIdx][\'extendStr\'] = curItem.extendStr ? false:true;//是否全部顯示

this.setData({

dataList: this.data.dataList

})

以上都是南昌小程序開(kāi)發(fā)公司百恒網(wǎng)絡(luò)有十多年開(kāi)發(fā)經(jīng)驗(yàn)的開(kāi)發(fā)工程師經(jīng)過(guò)實(shí)際操作總的實(shí)用經(jīng)驗(yàn)，希望對(duì)廣大技術(shù)人員有所幫助。

百恒網(wǎng)絡(luò)，專業(yè)專注于南昌小程序開(kāi)發(fā)、南昌APP開(kāi)發(fā)，南昌網(wǎng)站建設(shè)，為用戶提供高品質(zhì)網(wǎng)絡(luò)產(chǎn)品和優(yōu)質(zhì)服務(wù)是我們始終的追求,歡迎來(lái)電咨詢洽談。

400-680-9298,0791-88117053

css讀取HTML內(nèi)容實(shí)現(xiàn)方法

例如把更多拼接在省略號(hào)后面

歡迎您的光顧，我們將竭誠(chéng)為您服務(wù)×

歡迎您的光顧，我們將竭誠(chéng)為您服務(wù)×