CSS中的字數溢出自動隱藏為一個常見的UI效果，它能夠使長文字內容在有限的區域內顯示，并且當文字超出該區域時，自動隱藏，并以省略號（...）表示。這是通過使用CSS中的“text-overflow: ellipsis;”屬性實現的。 例如，如果我們想要一個固定寬度為200像素的div，能夠在該區域內顯示文本內容，并且超出該區域的文本自動隱藏并以省略號顯示，我們可以使用以下CSS樣式代碼：

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

在這個示例中，我們已經定制了div的寬度，同時將white-space屬性設置為“nowrap”，這是因為如果我們不設置該屬性，當文本內容超出div的寬度時，瀏覽器會自動換行將文本顯示在下一行，而我們想要的效果是整個文本內容顯示在一行內。overflow屬性設置為“hidden”，這是因為我們不希望div外部的文本受到該div的影響。最后，text-overflow屬性設置為“ellipsis”，這會告訴瀏覽器在文字超出div范圍時使用省略號替換超過邊界的文字。 通過使用這個技術，我們可以輕松地創建優雅的UI效果，使文本內容更加易于閱讀，并且在占用有限空間的情況下更好地呈現文本。