在設計網頁時，我們常常需要限制文本的長度，以免影響頁面的美觀度和可讀性。而CSS提供的text-overflow屬性，就是一種非常好的方法來限制文字長度，并在文字過長時自動添加省略號。

/* 設置寬度和高度 */
.example {
width: 200px;
height: 40px;
/* 只顯示一行 */
white-space: nowrap;
/* 超出寬度部分用省略號代替 */
text-overflow: ellipsis;
/* 必須同時設置overflow屬性 */
overflow: hidden;
}

在上面的代碼中，我們首先設置了所需元素的寬度和高度，確保超出部分不會影響頁面布局。然后通過設置white-space屬性為nowrap來保證文本只在一行顯示，再通過text-overflow屬性設置當文本溢出容器時顯示省略號。最后，一定要將overflow屬性設置為hidden，否則text-overflow屬性將不起作用。

除了ellipsis之外，text-overflow還可以設置其他值，如clip，表示文本溢出時隱藏超出部分，不顯示省略號；而string則允許我們自定義省略號的樣式，例如“…”、”--”等。

需要注意的是，text-overflow屬性只適用于單行文本，對于多行文本的省略號顯示需要使用其他技巧，例如使用JavaScript或CSS3實現，具體方法可以參考其他教程。