在網頁設計中，有時候我們希望將文字進行截斷顯示，以節省頁面空間。CSS提供了兩種方式實現兩行截斷的效果。

// 第一種方式：使用line-clamp屬性
.line-clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
// 第二種方式：使用偽元素
.ellipsis {
position: relative;
}
.ellipsis::after {
content: "...";
font-size: inherit;
position: absolute;
bottom: 0;
right: 0;
padding: 0 1rem;
background-color: rgba(255, 255, 255, 0.9);
}
.ellipsis::before {
content: "";
display: block;
height: 1.2em;
position: absolute;
top: 0;
right: 0;
width: 100%;
background-color: inherit;
z-index: 1;
}
.ellipsis p {
position: relative;
z-index: 2;
}

第一種方式是使用line-clamp屬性，在支持Webkit內核的瀏覽器內都可以使用。該屬性指定元素行數，超出行數的內容將隱藏。不支持的瀏覽器中，超出行數的內容將直接展示。

第二種方式是使用偽元素。先將字符串的長度限制在兩行，超出部分加上省略號。隨后在字符串末尾添加一個白色背景，將偽元素設為文本的父元素，并將其高度設置為文本行高，這樣就可以將多余的文字隱藏在白色背景后面。

綜上所述，以上兩種方式都可以實現兩行截斷的效果，不同瀏覽器適用的方式不同，可以根據自己的需求進行選擇。