講干貨，不啰嗦，有時候文案文字較多，用戶進入頁面時先隱藏一部分，有“查看更多”按鈕，用戶點擊展示全部文案，以下是具體實現：
最終效果：
具體實現：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <title>查看更多</title> </head> <body> <div class="main"> <div class="contain" id="textcontain"> <P> 阿薩德記錄卡決定是否考慮房價拉水電費就看見阿弗萊克士大夫家看來是打發時間登飛來峰 驕傲的看法傑卡斯兩地分居卡斯柯老大哥工行卡里發生打架阿斯利康的積分卡拉斯激發開始代理費 阿賈克斯房貸辣椒水兩地分居阿斯頓福建高考合格哈卡司法局大啊佳世客東方麗景阿斯蒂芬兩個號拉絲粉 按甲方的快速拉設計公開課辣椒粉單身快樂阿達撒說過發的說法噶經濟的方式卡里的首付款 離開垃圾發的空間里規划開發的規划愛上發達水電費噶地方愛的嘎啊哈哈公司的發生 埃及高科技阿里山風景奧克蘭市附近阿薩德六塊腹肌趕緊啊加快發啦時代峰峻奧克蘭市附近案件開發及 愛看的宮頸癌祿口街道法拉第設計費拉三季度福利卡世紀東方卡死了都放假快樂復健科就愛看的更加瘋狂地老師 </P> <div class="open-btn" id="btncontain"> <a onclick="showMore()">查看更多</a> </div> </div> </div> <script> // 點擊顯示更多按鈕 function showMore() { $("#textcontain").height("auto");//取消文字容器高度限制 $("#btncontain").hide();//隱藏查看更多按鈕 } </script> <style> .main{ width: 100%; } .contain{ width: 20%; position: relative; margin: 0 auto; height: 200px; overflow: hidden;/*設置文案容器高度，超出部分隱藏*/ text-align: center; } .open-btn{ position: absolute; width: 100%; bottom: 0; height: 80px; background: linear-gradient(180deg,rgba(255,255,255,0),#fff);/*實現漸變效果，遮罩效果*/ } .open-btn a{ text-decoration: none; color: chocolate; display: inline-block; margin-top: 60px; } </style> </body> </html>
步驟1：設置文字容器的高度，超出部分隱藏
步驟2：設置查看更多按鈕層，絕對定位，至於文字層底部
步驟3：設置按鈕層線性漸變，實現遮罩效果
步驟4：按鈕添加點擊事件，點擊時取消文字層高度限制，並隱藏查看更多按鈕
歡迎評論交流！