當文本內容超出容器的寬度時，我們可以使用 CSS 屬性text-overflow: ellipsis;來使文本顯示省略號，以表示內容被截斷。這個屬性適用于單行文本。

div {
white-space: nowrap; /* 確保文本不換行 */
overflow: hidden; /* 隱藏超出容器寬度部分的文本 */
text-overflow: ellipsis; /* 顯示省略號 */
}

然而，如果我們想要在多行文本中使用省略號，CSS 并沒有直接的解決方案。但是，我們可以通過結合display: -webkit-box;等屬性來實現這個功能，具體代碼如下：

div {
height: 60px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3; /* 顯示 3 行文本 */
display: -webkit-box;
-webkit-box-orient: vertical;
}

這里使用了-webkit-line-clamp: 3;屬性來控制顯示的行數，同時需要配合display: -webkit-box;和-webkit-box-orient: vertical;來實現多行文本的截斷和顯示省略號。

注意，這些屬性為 Chrome 和 Safari 瀏覽器私有屬性，其他瀏覽器不支持。同時，如果我們想要在多行文本上使用省略號，也可以使用 JavaScript 進行實現。

let element = document.getElementById("element");
// 判斷文本是否超出容器寬度
if (element.scrollHeight >element.clientHeight) {
let text = element.innerText;
while (element.scrollHeight >element.clientHeight) {
text = text.slice(0, -1);
element.innerText = text + '...';
}
}

這個 JavaScript 代碼通過動態截斷文本的方式來實現多行省略號的效果，需要在 HTML 中設置好容器的高度和寬度。這種方式的好處是兼容性好，適用于所有瀏覽器。