text-overflow屬性用來設定容器內的文字溢位時，如何處理溢位的內容，取值為 clip | ellipsis，預設值為 clip。

clip 表示文字溢位時，簡單的把溢位的部分裁剪掉；ellipsis 表示文字溢位時，在溢位的地方顯示一個省略標記（…）。

在使用 text-overflow屬性時，一定要給容器定義寬度，否則，文字只會撐開容器，而不會溢位。

事實上，text-overflow屬性只能定義文字溢位時的效果，並不具備其它樣式功能。所以，無論 text-overflow屬性取值是 clip，還是 ellipsis，要讓 text-overflow屬性生效，必須強制文字在一行內顯示（white-space: nowrap），同時隱藏溢位的內容（overflow: hidden）。

如果省略 overflow: hidden，文字會橫向溢位容器的外面；如果省略 white-space: nowrap，文字在橫向到達容器邊界時，會自動換行，即便定義了容器的高度，也不會出現省略號，而是把多餘的文字裁切掉；如果省略 text-overflow: ellipsis，多餘的文字會被裁切掉，就相當於 text-overflow: clip。

下面給出未設定 text-overflow屬性、text-overflow屬性取值為 clip 和 ellipsis 時的效果對比。CSS程式碼如下：

1. p {
2. width:304px;
3. height:18px;
4. line-height:14px
   ;
5. font-family:Arial;
6. font-size:14px;
7. border:1px solid #444;
8. }
9. .clip {
10. text-overflow: clip;
11. }
12. .ellipsis {
13. text-overflow: ellipsis;
14. }
15. .clip,.ellipsis {
16. overflow: hidden;
17. white-space: nowrap;
18. }

HTML程式碼如下：

1. <p>未設定 text-overflow屬性時，文字完整顯示，可能會溢位容器</p>
2. <pclass="clip">text-overflow屬性取值clip時，文字溢位時，只是簡單的把溢位的部分裁剪掉
   </p>
3. <pclass="ellipsis">text-overflow屬性取值ellipsis時，文字溢位時，在溢位的地方顯示一個省略號</p>

上述程式碼定義了三個 p 容器，第一個未定義 text-overflow、overflow、white-space 屬性，第二個定義 text-overflow屬性取值為 clip，第二個定義 text-overflow屬性取值為 ellipsis。為了方便看清楚容器的邊界，為li定義了高度，同時添加了邊框。執行效果如圖 3‑27 所示：

從上圖可以看出，第一個段落的內容完整顯示但溢位到容器的外邊，第二個段落只是簡單的把溢位的部分裁剪掉，第三個段落在溢位的地方顯示了一個省略號。