在網頁設計中，我們經常會使用 CSS 來控制元素的樣式。其中，設置元素的寬度是一個常見的需求。然而，有時候我們設置的寬度可能會小于元素本身的實際寬度，這時候，元素內容就會超出邊框而被隱藏。

為了解決這個問題，我們可以使用 CSS 中的text-overflow屬性。這個屬性可以控制當元素內容超出邊框時，如何顯示剩余的部分。其中的一個值叫做ellipsis，可以在內容末尾顯示省略號，讓用戶知道這里還有一些內容，但是無法顯示。

不過，在某些情況下，我們可能希望能夠顯示更多的信息，而不是僅僅顯示省略號。比如，我們可能希望把超出寬度的內容用逗號隔開，從而讓用戶能夠看到更多的信息。那么該怎么做呢？

p {
white-space: nowrap; /* 禁止換行 */
overflow: hidden; /* 隱藏超出部分 */
text-overflow: ellipsis; /* 顯示省略號 */
}
p::after {
content: ','; /* 在末尾添加逗號 */
display: inline; /* 使逗號和內容在同一行 */
padding: 0 2px; /* 添加一點間距 */
}

上面的代碼使用了 CSS 中的::after偽元素來在段落的末尾添加逗號。同時，還使用了white-space和overflow屬性來控制段落的樣式，使其不換行，隱藏超出部分。

這樣，在段落的末尾，我們就可以看到用逗號隔開的超出部分了。當然，如果我們希望使用其他的分隔符，也可以在content屬性中進行修改。