vue實現文字展開收起

2021-10-06 22:27:48 字數 763 閱讀 4877

思路:

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

html

}

}

css

.total-introduce

}.unfold

}}.detailed-introduce

&::after,

&::before

&::before

&::after

.unfold }}

}

js

export default 

}, methods:

}, watch:

const descheight = window.getcomputedstyle(this.$refs.desc).height.replace('px', '');

if (parseint(descheight) * 2 > 120) else

});}}

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

設定state變數 state state變數觸發方法 handleup this state this setstate 是否觸發expand fold元件 文字長度大於100則觸發 let i panddiv if text.length 100 expand a else fold a els...

文字的展開與收起

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

評論 展開 收起

列表中文字最多三行,超出部分省略,並顯示展開收起按鈕,如果文字沒有超出三行則不顯示展開收起按鈕 1 在div 中新增乙個span 然後給div設定超出三行省略,這時候就可以獲取到文字高度和div高度了 2 根據字串長度判斷是否做展開 收起 單行 雙行顯示處理 特點 簡單粗暴 缺點 對於有換行字元的,...