React 長文字展開收起功能實現

2021-10-04 21:55:06 字數 832 閱讀 8224

設定state變數

state=

state變數觸發方法

handleup=(

)=>

=this

.state;

this

.setstate()

;}

是否觸發expand/fold元件 文字長度大於100則觸發

let i***panddiv;

if(text.length >

100)

>expand<

/a>)}

else

>fold<

/a>)}

}else

通過state控制樣式展開/收起

:}

>

<

/div>

<

/div>

}

注意點

webkitboxorient:

'vertical'

,webkitlineclamp:

'3',

也可以這樣解決

/*!autoprefixer:off*/

-webkit-box-orient:vertical;

/*!autoprefixer:on*/

實現效果

vue實現文字展開收起

思路 主要是css上可以分為兩部分,第一部分展示前面兩行,第二部分會根據第一部分的行數判斷縮排的大小,然後展示第三行。最後通過背景色的控制讓兩者看上去是一段文字。html css total introduce unfold detailed introduce after,before befor...

文字的展開與收起

pay hint content class ellipsis?ellipsis unellipsis 1.支付成功後,將會推送排隊號 就診當日可直接前往診室等待叫號就診,無需再現場繳費 排隊。n2.已完成支付 費用的使用者,如在就診前一日取消預約訂單,成功申請取消訂單後,正常情況下系統將會在7個工...

微信小程式 文字的展開與收起

詳細 style v2 sitemaplocation sitemap.json class container class title 今日天氣view class content 氣象台11月18日6時發布暴雪橙色預警,預計,11月18日08時至19日08時,黑龍江東南部 吉林西部和北部 遼寧西...