在網頁設計中，有時候我們不希望文本太長、過度占用頁面空間，這時候我們可以使用 CSS 控制文本省略。

當一個容器內的文本過多時，應用 text-overflow 屬性可以將文本在容器中的顯示進行省略。

/* 單行文本省略 */
.ellipsis {
white-space: nowrap; /* 強制不換行 */
overflow: hidden; /* 隱藏超出范圍部分 */
text-overflow: ellipsis; /* 超出部分用省略號”…”代替 */
}

上面的代碼是一個單行文本省略的示例，其中 white-space 屬性可以防止文本自動換行，overflow 屬性可以隱藏超出范圍的文本，而 text-overflow 屬性則可以指定超出部分顯示省略號。

/* 多行文本省略 */
.ellipsis {
display: -webkit-box; /* 將對象作為彈性伸縮盒子模型顯示 */
-webkit-line-clamp: 2; /* 顯示的行數 */
-webkit-box-orient: vertical; /* 垂直顯示 */
overflow: hidden; /* 隱藏超出范圍部分 */
text-overflow: ellipsis; /* 超出部分用省略號”…”代替 */
}

而如果要控制多行文本的省略，可以使用 -webkit-line-clamp 屬性，以控制最多顯示的行數。

在實際應用中，我們可以將這些省略文本應用于博客標題、評論區、導航欄選項等。