列表中文字最多三行,超出部分省略,並顯示展開收起按鈕,如果文字沒有超出三行則不顯示展開收起按鈕
1)在div 中新增乙個span 然後給div設定超出三行省略,這時候就可以獲取到文字高度和div高度了
}}
2)根據字串長度判斷是否做展開|收起、單行|雙行顯示處理
特點:簡單粗暴
缺點:對於有換行字元的,無法準確定位行數
適用場景:大段簡介、標題單行|雙行切換顯示
}100 && !isopen" @click.stop="handleopen" class="intro__content-btn">展開
100 && isopen" @click.stop="handleopen" class="intro__content-btn1">收起
}
filters:
if (value.length > 18)
return value;}}
3)根據行數限制通過文字行高計算顯示塊的高度
首先得判斷文字自否超過四行,因為這些一般都是是前端非同步請求然後後端傳送過來,在組長的指導下,使用了 vue 中的 nexttick 來監聽 dom 中是資料變化。
接下來主要是 css 上的思路,其實上圖可以分為兩部分,如下圖,標號1的部分展示前面三行,標號為2的部分會根據1的行數判斷縮排的大小,然後展示第四行。最後通過背景色的控制讓兩者看上去是一段文字。
為了證明樓下的那貨不會對我造成影響
}
}
為了證明樓上的那貨不會對我造成影響
點這試試一段比較長的文字
點這試試一段比較短的文字
Qml 展開收起面板
搜了一下網上沒有類似功能的ui,實現了乙個給大家參考。accordionelement.qml 由乙個layout組成,layout裡包含標題和內容元件,可以在外部實現內容元件進行替換,如isopen為false,內容元件將收縮起來,反之則展開。import qtquick 2.5 import q...
vue實現文字展開收起
思路 主要是css上可以分為兩部分,第一部分展示前面兩行,第二部分會根據第一部分的行數判斷縮排的大小,然後展示第三行。最後通過背景色的控制讓兩者看上去是一段文字。html css total introduce unfold detailed introduce after,before befor...
文字的展開與收起
pay hint content class ellipsis?ellipsis unellipsis 1.支付成功後,將會推送排隊號 就診當日可直接前往診室等待叫號就診,無需再現場繳費 排隊。n2.已完成支付 費用的使用者,如在就診前一日取消預約訂單,成功申請取消訂單後,正常情況下系統將會在7個工...