在網頁設計中，有時我們會遇到一段文字太長超出了頁面寬度的情況。這時候，為了美觀和布局的需要，我們需要對文字進行處理，顯示成省略號的形式。在CSS中，我們可以使用單行超出省略號的屬性 -text-overflow: ellipsis;來實現。

在使用該屬性前，我們需要設置兩個CSS屬性：

/* 省略號效果，必須結合“display: block”樣式使用 */
display: -webkit-box; 
-webkit-box-orient: vertical; 
-webkit-line-clamp: 1; 
overflow: hidden;

這里需要注意的是，text-overflow: ellipsis;屬性必須結合display: block;使用。同時，為了控制省略行數，我們可以使用-webkit-line-clamp: 1;屬性來控制，這里的數字代表需要顯示的行數。

下面是一個使用單行超出省略號的簡單例子：

p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* 禁止文字換行 */
width: 200px; /* 寬度必須設定，通常情況下為固定寬度*/
}

在實際應用中，我們可以將該屬性用于按鈕的文字、標題等地方，能夠有效地提升網頁的美觀程度和用戶體驗。