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

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;必須結合的屬性,設置或檢索伸縮盒子模型對象的子元素的排列方式。    */           
}