使用 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;
}

两种方法都通过将文本推到屏幕外或将其隐藏在元素内来实现所需的结果。