在 CSS 中有一個屬性，叫做white-space，它決定了如何處理文本內容中的空白字符。默認情況下，HTML 中相鄰的空白字符被合并成一個空格，而在文本內容中，空白字符（如空格、制表符、換行符等）會被保留。

然而，當有一行文本較長時，部分文本可能會被截斷。這通常不會造成太大的問題，因為文本會換行到下一行上。但是，在某些情況下，我們希望一行文本沒有任何換行，而是在容器內單獨占據一行。

.single-line-text {
white-space: nowrap;
}

使用white-space: nowrap可以讓文本內容不進行換行，強制一行顯示。但這也會帶來一個問題：如果文本內容過長，它會超出容器的寬度，并被裁剪。這時，可以使用 CSS 的文本流溢出屬性，來控制文本如何在容器內溢出和溢出內容的顯示方式。

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

上述代碼中，我們使用overflow: hidden告訴瀏覽器當文本內容溢出容器時隱藏它。然后，使用text-overflow: ellipsis顯示省略號，表示被截斷的文本內容。這個語法只在單行文本顯示時有效，當文本內容到達容器邊緣時就會開始顯示省略號。