CSS單行文本省略是指當一行文本過長時，可以使用省略號（...）來代替超出部分，以達到更好的視覺效果。這在移動端或者設計中很常見，下面來介紹幾種實現方法。

.text-overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

首先介紹使用CSS屬性實現的方法，這里使用了三個屬性來實現。首先是white-space屬性，它用來設置空格如何處理。這里設置為nowrap表示不換行。接下來是overflow屬性，用來設置溢出內容的處理方式。這里設置為hidden表示隱藏超出內容。最后是text-overflow屬性，用來設置溢出文本的顯示方式。這里設置為ellipsis表示使用省略號代替超出部分。

.dot-dot-dot {
width: 100px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}

還有一種方法是使用webkit內核的flex布局，這種方法適用于移動端。設置一個固定寬度，溢出部分隱藏。然后使用-webkit-box-orient: vertical來表示垂直方向的文本溢出，使文本省略。最后使用-webkit-box-orient: vertical和-webkit-line-clamp: 2來表示文本最多顯示兩行，多出的部分使用省略號代替。

我長長的一行文本

還有一種方法是使用偽元素，在元素的后面添加一個包含省略號的偽元素來代替超出部分。但是這種方法需要設置元素的寬度和它的容器的寬度是一樣的，才能實現省略號顯示出來。下面是示例代碼：

.text-ellipsis {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.text-ellipsis::after {
content: "...";
position: absolute;
right: 0;
bottom: 0;
padding-left: 5px;
background-color: white;
}

以上就是幾種實現CSS單行文本省略的方法，可以根據實際情況選擇最適合自己的方法。