在網頁中，有時候我們需要限定某個文本塊（比如新聞標題）的顯示行數，超出部分省略號顯示。在 CSS3 中可以使用 text-overflow 和 line-clamp 屬性來實現這個功能。

首先，我們可以先來看一下 text-overflow 屬性，它可以用于控制當文本溢出容器時的顯示方式。比如說，我們可以將文本溢出的部分用省略號來代替，代碼如下：

.line1 {
white-space: nowrap;        // 防止文本折行
overflow: hidden;           // 隱藏溢出的文本
text-overflow: ellipsis;    // 用省略號代替溢出的文本
}

這樣，當元素中的文本溢出容器時，就會自動顯示為省略號。

接下來，如果我們想限制文本塊的顯示行數并且超過部分顯示省略號，就需要用到 line-clamp 屬性。但是，該屬性目前只有 webkit 內核的瀏覽器支持，所以我們需要加上 -webkit- 前綴。代碼如下：

.line2 {
overflow: hidden;           // 隱藏溢出的文本
text-overflow: ellipsis;    // 用省略號代替溢出的文本
display: -webkit-box;       // 將對象呈現為彈性伸縮盒子
-webkit-box-orient: vertical;   // 水平盒子
-webkit-line-clamp: 3;      // 顯示的行數
}

其中，我們將元素的 display 屬性設置為 -webkit-box，讓元素呈現為一個彈性伸縮盒子；-webkit-box-orient 屬性控制彈性伸縮盒子的方向；-webkit-line-clamp 屬性控制元素顯示幾行文本，超過部分用省略號代替。

需要注意的是，line-clamp 屬性目前只有 webkit 內核的瀏覽器支持，而在火狐、IE 和 Edge 等瀏覽器中不支持，所以需要在代碼中加上-vendor 前綴，例如在 Safari 瀏覽器中需要加上 -webkit-