在網頁設計中，常常會遇到單行文本過長的問題。這時候我們可以使用CSS來實現單行文字折疊。

首先，我們需要在CSS中定義一個單行容器，使用overflow: hidden;來隱藏文本溢出。

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

接下來，我們需要使用偽元素::before或::after來添加省略號，表示文本被折疊了。

.single-line {
white-space: nowrap;
overflow: hidden;
}
.single-line::before {
content: "...";
float: right;
}

這樣，當單行文本超出容器寬度時，就會出現省略號，表示文本被折疊了。

當然，如果我們希望點擊省略號可以展開文本，那么我們可以使用JavaScript來實現。

function toggleText() {
var element = document.getElementById("text");
if (element.style.display === "none") {
element.style.display = "inline";
} else {
element.style.display = "none";
}
}

使用display: none;來隱藏展開的文本，通過getElementById來獲取元素，并使用toggleText來切換顯示/隱藏狀態。

最后，我們需要在省略號上添加一個點擊事件，來觸發展開/折疊操作。

.single-line::before {
content: "...";
float: right;
cursor: pointer;
}
.single-line::before:hover {
text-decoration: underline;
}

使用cursor: pointer;來將鼠標指針轉變為手指樣式，表示可以點擊。使用text-decoration: underline;來在鼠標懸停時添加下劃線效果，提示用戶可以點擊。

通過CSS和JavaScript的配合，我們可以很方便地實現單行文字的折疊和展開，為網頁設計提供更多的靈活性和效果。