html中內容超出顯示省略號的方法

本博客主要介紹 前端開發中文本過多，以省略號顯示。

效果如圖：

???????????????

單行：

<!--單行--> <p class="pl">這個屬性定義溢出元素內容區的內容會如何處理。如果值為 hidden，當點擊hidden時，滾動機制關閉，</p>

CSS

/*單行文本的溢出顯示省略號*/.pl{width: 200px;overflow:hidden;text-overflow:ellipsis; background: goldenrod;white-space: nowrap;/*加寬度width屬來兼容部分瀏覽*/}

多行：

<div id="p2">這個屬性定義溢出元素內容區的內容會如何處理。如果值為 hidden，當點擊hidden時，滾動機制關閉，內容會被修剪，但是瀏覽器不會顯示供查看內容的滾動條，默認值是 visible。這是一個段落。這是一個段落。這是一個段落。這是一個段落。 </div>

CSS

/*多行文本溢出顯示省略號*/ #p{width:220px;height:58px;overflow:hidden;text-overflow:ellipsis;background: greenyellow;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;/*-webkit-line-clamp是用來限制在一個塊級元素內顯示的文本行數，為了實現這個效果，需要結合其他-webkit屬性。常見屬性如下：display:-webkit-box;必須結合的屬性，將對象作為彈性盒子模型顯示。-webkit-box-orient:vertical;必須結合的屬性,設置或檢索伸縮盒子模型對象的子元素的排列方式。 */ }

?

轉載于:https://www.cnblogs.com/z-l-d/p/10409354.html

總結

以上是生活随笔為你收集整理的html中内容超出显示省略号的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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