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

/*多行文本溢出顯示省略號*/
        #p2{
            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 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。*/
        }