Texto invisível usando CSS

Ocultar elementos de texto usando CSS pode ser útil para vários propósitos de design. Um cenário comum é substituir o texto por uma imagem como logotipo. Este artigo aborda um problema específico: como remover efetivamente o texto original ao exibir a imagem.

Soluções para ocultar texto

Existem várias abordagens para tornar o texto invisível enquanto preservando as dimensões do elemento para posicionamento da imagem.

Método 1: recuo de texto

Uma técnica envolve empurrar o texto para fora da tela usando text-indent:

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 */
}

Método 2: ocultação de texto

Outra solução evita a grande caixa invisível criada pelo recuo negativo:

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

Ambos os métodos alcançam o resultado desejado empurrando o texto para fora da tela ou ocultando-o dentro do elemento.