在設計網頁過程中，我們常常會遇到一個問題，就是當文字內容超出父容器的寬度時該如何處理。 這時，我們可以使用CSS中的text-overflow屬性來解決這個問題。這個屬性可以控制當文字溢出容器時如何呈現，有以下三種取值： 1. clip：默認值，超出的部分將被裁剪掉； 2. ellipsis：超出的部分將以省略號 (...) 的形式出現； 3. string：自定義字符，超出的部分將以該字符結尾。 其中，最常用的是省略號形式，示例如下：

p{
white-space: nowrap; /* 防止文字換行 */
overflow: hidden; /* 隱藏超出部分 */
text-overflow: ellipsis; /* 超出部分顯示省略號 */
}

在上述示例代碼中，我們先設置了white-space屬性為nowrap，它能夠防止文字自動換行，這樣保證了超出的部分必定是在同一行內。 接著，我們利用overflow屬性將超出的部分隱藏，最后使用text-overflow屬性將超出部分以省略號的形式展示出來。 需要注意的是，使用text-overflow:ellipsis屬性時，所在元素必須滿足以下條件： 1. 必須設置overflow:hidden或overflow:scroll； 2. 必須設置white-space:nowrap； 3. 必須指定一個固定寬度的容器。 總之，text-overflow是一個非常實用的CSS屬性，它可以幫助我們更好地控制文字內容的呈現方式，可以讓網頁看起來更加整潔美觀。