本部落格主要介紹 前端開發中文字過多，以省略號顯示。

效果如圖：

單行：

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

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

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

/*多行文字溢位顯示省略號*/
        #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 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 。*/
        }