CSS中的字?jǐn)?shù)溢出自動(dòng)隱藏為一個(gè)常見的UI效果，它能夠使長(zhǎng)文字內(nèi)容在有限的區(qū)域內(nèi)顯示，并且當(dāng)文字超出該區(qū)域時(shí)，自動(dòng)隱藏，并以省略號(hào)（...）表示。這是通過使用CSS中的“text-overflow: ellipsis;”屬性實(shí)現(xiàn)的。 例如，如果我們想要一個(gè)固定寬度為200像素的div，能夠在該區(qū)域內(nèi)顯示文本內(nèi)容，并且超出該區(qū)域的文本自動(dòng)隱藏并以省略號(hào)顯示，我們可以使用以下CSS樣式代碼：

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

在這個(gè)示例中，我們已經(jīng)定制了div的寬度，同時(shí)將white-space屬性設(shè)置為“nowrap”，這是因?yàn)槿绻覀儾辉O(shè)置該屬性，當(dāng)文本內(nèi)容超出div的寬度時(shí)，瀏覽器會(huì)自動(dòng)換行將文本顯示在下一行，而我們想要的效果是整個(gè)文本內(nèi)容顯示在一行內(nèi)。overflow屬性設(shè)置為“hidden”，這是因?yàn)槲覀儾幌Ｍ鹍iv外部的文本受到該div的影響。最后，text-overflow屬性設(shè)置為“ellipsis”，這會(huì)告訴瀏覽器在文字超出div范圍時(shí)使用省略號(hào)替換超過邊界的文字。 通過使用這個(gè)技術(shù)，我們可以輕松地創(chuàng)建優(yōu)雅的UI效果，使文本內(nèi)容更加易于閱讀，并且在占用有限空間的情況下更好地呈現(xiàn)文本。