在進行網頁設計時，經常會遇到文字排版問題，有時候我們需要將文字限制在一定的區域內，但是文字長度可能會超出限制的區域，這時候CSS中的text-overflow屬性就可以很好的解決這一問題。

首先，我們需要在 CSS 樣式表中給要限制文字長度的元素設置限制寬度width屬性，并設置overflow屬性為hidden，這樣超出寬度的文字就會被隱藏。

.example {
width: 200px;
overflow: hidden;
}

接下來，我們需要使用text-overflow屬性來控制超出的文字如何顯示。

如果希望超出的文字在容器內隱藏，并在末尾顯示省略號，可以使用以下 CSS 代碼：

.example {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

其中，white-space: nowrap;屬性使得文字不換行顯示，text-overflow: ellipsis;屬性則是顯示省略號。

如果希望超出的文字自動換行并顯示省略號，可以使用以下 CSS 代碼：

.example {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

其中，-webkit-line-clamp: 2;屬性設置為兩行，并通過display: -webkit-box;和-webkit-box-orient: vertical;屬性讓文字垂直排列，最后text-overflow: ellipsis;屬性顯示省略號。

通過使用text-overflow屬性，我們可以很方便地解決文字超出限制寬度的問題，讓我們的網頁設計更加精致！