CSS中有一個非常常見的問題，就是當某個字段的內容過長時，會超出所在的盒子或容器。這時，如果我們想要讓這個字段在不改變布局的前提下同時顯示完整的內容，該怎么辦呢？這就要用到CSS中的一個非常實用的屬性：text-overflow。

text-overflow屬性可以控制當元素中的文本溢出時如何處理。一般情況下，CSS會直接截斷超出容器的文本，然后用省略號代替被截斷的內容。不過，如果我們希望在一定的條件下在元素的末尾顯示省略號，而不是在某個位置截取文本，就可以使用text-overflow屬性了。

text-overflow屬性有三個可選值：

text-overflow: clip;       // 文本內容超出容器時直接截斷
text-overflow: ellipsis;   // 在文本末尾顯示省略號
text-overflow: initial;    // 將text-overflow屬性重置為默認值

其中，最常用的就是ellipses，它可以讓元素文本超出容器時，在末尾顯示省略號。但是需要注意的是，要使用text-overflow的ellipses屬性生效，必須同時設置white-space屬性為nowrap，這樣才不會讓文本自動換行，從而達到截取文本的效果。

.box {
white-space: nowrap;    // 文本不自動換行
overflow: hidden;       // 超出部分隱藏
text-overflow: ellipsis; // 文本末尾顯示省略號 
}

除了常規的文本內容，text-overflow屬性對于一些圖片、超鏈接、單詞等等同樣適用。只要設置好對應的盒子或容器樣式，text-overflow屬性就能在特定的場景下達到使超出部分顯示省略號的效果。