CSS 字體自動(dòng)隱藏是一種非常常見(jiàn)的技巧，特別是在移動(dòng)設(shè)備上。當(dāng)文字過(guò)長(zhǎng)或過(guò)多時(shí)，自動(dòng)隱藏可以避免頁(yè)面布局混亂。下面我們來(lái)學(xué)習(xí)如何實(shí)現(xiàn)這種效果。

.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

上述代碼是實(shí)現(xiàn)CSS 字體自動(dòng)隱藏效果的關(guān)鍵。我們使用 overflow 屬性把多余的文本隱藏起來(lái)，使用 text-overflow 屬性在文本末尾添加省略號(hào)（“…”），并使用 white-space 屬性控制文本不換行。

現(xiàn)在我們?cè)跇邮奖碇惺褂眠@個(gè)類來(lái)給元素添加這種效果：

p {
width: 200px;
font-size: 18px;
}
這是一段超過(guò)200像素的長(zhǎng)文本，太長(zhǎng)了太長(zhǎng)了太長(zhǎng)了太長(zhǎng)了太長(zhǎng)了太長(zhǎng)了太長(zhǎng)了太長(zhǎng)了太長(zhǎng)了...

我們可以看到，使用上述樣式，文本會(huì)被截?cái)嗖⒃谀┪诧@示省略號(hào)。如需查看全部?jī)?nèi)容，可以使用 JavaScript 或者用戶操作等方式進(jìn)行展開(kāi)。

總結(jié)：CSS 字體自動(dòng)隱藏是一個(gè)簡(jiǎn)單而又實(shí)用的技巧，能夠解決移動(dòng)設(shè)備上的布局問(wèn)題。我們可以通過(guò) overflow、text-overflow 和 white-space 三個(gè)屬性來(lái)實(shí)現(xiàn)這種效果。在使用時(shí)，需要注意對(duì)元素寬度和字體大小進(jìn)行調(diào)整，以確保顯示效果符合預(yù)期。