文章詳情頁(yè)
angular.js - angular內(nèi)容過(guò)長(zhǎng)展開(kāi)收起效果
瀏覽：2928日期：2024-10-20 17:39:36
問(wèn)題描述
1.p中的內(nèi)容過(guò)長(zhǎng)，當(dāng)內(nèi)容過(guò)長(zhǎng)，超過(guò)兩行的顯示時(shí)，出現(xiàn)一個(gè)【展示】標(biāo)簽，展開(kāi)之后內(nèi)容最后面出現(xiàn)【收起】標(biāo)簽，類似于QQ空間發(fā)表的說(shuō)說(shuō)，長(zhǎng)了顯示全文，完了還可以收起來(lái)的效果，我做的無(wú)法判斷內(nèi)容長(zhǎng)度，而且一行中顯示的中英文字?jǐn)?shù)是不等的，想有個(gè)效果完整的例子看看。
問(wèn)題解答
回答1：我給個(gè)思路，html在文字后面加個(gè)inline-block(你的展開(kāi)和關(guān)閉)。css設(shè)置固定高，超出后overflow:hidden。js判斷高度，超過(guò)后最外層加一個(gè) class,這個(gè) class控制你的展開(kāi)和關(guān)閉，還有清除固定高和overflow：hidden。當(dāng)然如果是響應(yīng)式得另外想辦法。
回答2：angular filter
回答3：使用line-height指定高度，通過(guò)這個(gè)高度來(lái)實(shí)現(xiàn)收起拉伸
上一條：docker安裝后出現(xiàn)Cannot connect to the Docker daemon.下一條：angular.js - angularjs的自定義過(guò)濾器如何給文字加顏色？
相關(guān)文章：
1. javascript - QQ第三方登錄的問(wèn)題2. java - 如何點(diǎn)擊按鈕，重新運(yùn)行（我是初學(xué)者）？3. node.js - express框架，設(shè)置瀏覽器從緩存中讀取靜態(tài)文件，只有js從緩存中讀取了，css還有一些圖片為何沒(méi)有從緩存中讀取？4. java - web端百度網(wǎng)盤的一個(gè)操作為什么要分兩次請(qǐng)求服務(wù)器, 有什么好處嗎5. 前端 - @media query 使用出現(xiàn)的問(wèn)題？6. vue.js - vue-router開(kāi)啟HTML5的history模式后nginx配置7. android - RxJava的使用問(wèn)題。8. javascript - 請(qǐng)指條明路，angular的$event，在select中卻是undefined？9. java - Spring boot 讀取 放在 jar 包外的，log4j 配置文件，系統(tǒng)有創(chuàng)建日志文件，不寫入日志信息。10. javascript - 我的站點(diǎn)貌似被別人克隆了， google 搜索特定文章，除了域名不一樣，其他的都一樣，如何解決？
排行榜
熱門標(biāo)簽
網(wǎng)公網(wǎng)安備