在網頁設計中，經常需要使用省略號來代表一段文字或標題的截斷。在 HTML 中，我們可以使用“…”或“…”來實現省略號的效果。但是，在某些情況下，我們希望省略號不會自動換行，或者想要自定義省略號的樣式，這時候 CSS3 中的“text-overflow”屬性就能派上用場。

“text-overflow”屬性允許我們設置文本溢出時如何顯示溢出部分。默認情況下，溢出部分會被隱藏，但是如果我們設置“text-overflow: ellipsis;”，則溢出部分會被省略為三個點（即“…”）。

下面是一個例子：

p {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

在這個例子中，我們將文本框的寬度設置為200像素，并且禁止了文本換行（使用“white-space: nowrap;”）。如果文本內容太長，超出了文本框的寬度，就會出現溢出。此時，我們設置“text-overflow: ellipsis;”就會顯示省略號來代表文本的截斷。

另外，值得注意的是，“text-overflow”屬性只會在文本框被設置為“overflow: hidden;”時才生效。如果沒有設置“overflow: hidden;”，即使設置了“text-overflow: ellipsis;”，也不會產生省略號的效果。

在一些情況下，我們可能想要自定義省略號的樣式。在 CSS3 中，我們可以使用“::after”偽元素來實現這個效果：

p {
position: relative;
width: 200px;
white-space: nowrap;
overflow: hidden;
}
p::after {
content: "···";
position: absolute;
right: 0;
bottom: 0;
background-color: white;
padding: 0 2px;
font-size: 12px;
}

在這個例子中，我們在“p”元素上設置了“position: relative;”，這樣“::after”偽元素的位置將是基于“p”元素的。我們將省略號的內容設置為“content: "···";”，并且使用了絕對定位將它放置在文本框的右下角。為了排除省略號與文本重疊，我們設置了“background-color: white; padding: 0 2px;”屬性，這樣省略號就會自動留出一些空白的區域。

總之，“text-overflow”屬性和“::after”偽元素是很有用的工具，它們可以幫助我們更好地控制文本溢出效果的樣式。