overflow: hidden;text-overflow: ellipsis;white-space: normal ！important;display: -webkit-box;-webkit-line-clamp: 4; /* 顯示4行，為auto時不隱藏 */-webkit-box-orient: vertical;

• 查看全部與收起事例

<div class="notice" style="-webkit-line-clamp: 4">之鹿藝術培訓中心是經國家教育部門批準注冊的專業美術高考集訓營。始終致力于做“良心教育，負責任的教育”的美術高考集訓營顯著的升學之鹿藝術培訓中心是經國家教育部門批準注冊的專業美術高考集訓營。始終致力于做“良心教育，負責任的教育”的美術高考集訓營顯著的升學 </div> <div class="all" id="all"><span class="isViewAll">展開全部</span> </div> .notice {overflow: hidden;text-overflow: ellipsis;white-space: normal ！important;display: -webkit-box;/* -webkit-line-clamp: 4; */-webkit-box-orient: vertical; } all.onclick = function() {if (+mui(".notice")[0].style["-webkit-line-clamp"] === 4) {mui(".notice")[0].style["-webkit-line-clamp"] = "";document.querySelector(".notice").parentNode.querySelector(".isViewAll").innerHTML = "收起";} else {mui(".notice")[0].style["-webkit-line-clamp"] = 4;document.querySelector(".notice").parentNode.querySelector(".isViewAll").innerHTML = "查看全部";} }

轉載于:https://www.cnblogs.com/Yancyzheng/p/10773411.html

總結

以上是生活随笔為你收集整理的适配移动端的文字超出隐藏并添加省略号的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。