使用 CSS 隱藏文字

使用 CSS 隱藏文字元素可用於各種設計目的。常見的情況是用圖像替換文字作為徽標。本文解決了一個具體問題：如何在顯示圖像時有效地去除原始文字。

隱藏文字的解決方案

有多種方法可以使文字在顯示影像時不可見保留影像放置的元素尺寸。

方法 1：文字縮排

一種技巧涉及使用文字縮排將文字推出畫面：

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;
    white-space: nowrap;            /* because only the first line is indented */
}

方法2：文字隱藏

另一個解決方案避免負縮排創建的大的隱形框：

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

兩種方法都透過將文字推到螢幕外或將其隱藏在元素內來實現所需的結果。