Ecco il codice completo:

.hide-text {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
}

La seconda tecnica invece, pubblicata da Nicolas Gallagher nel suo blog e inserita all'interno di HTML5 Boilerplate prevede un hack che azzera font-size e line-height e fa uso di un super shorthand per dichiarare una sola lettera come font-family. text-shadow: none e color: transparent fanno il resto.
Da notare che su HTML5 Boilerplate, la tecnica viene presentata dichiarando anche background-color: transparent e border: 0.

Ecco il codice completo:

.ir {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

Sono entrambi valide e molto molto semplici da utilizzare. A voi i test (vi consiglio di provare bene la 2° su IE7) per capire se e quale implementare in produzione o no.

5 CommentiDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *

@andrea puoi creare un piccolo test su http://jsbin.com/ e condividerlo qui nei commenti?

Marco Pontili
Marco Pontili

Salve a tutti, ho provato ad utilizzare la classe .hide-text ma noto con mio stupore che questa tecnica non funziona con Google Chrome (ver. 23) riesco a nascondere il testo soltanto utilizzando un text-indent negativo... Qualcuno di voi ha riscontrato gli stessi problemi?

Andrea Barghigiani
Andrea Barghigiani

che io sappia color:transparent non ha una buona retrocompatibilità , per il resto, ok ma di nuovo non mi pare di vedere nulla :)

Michele
Michele

Principalmente: brevità  no text-indent negativo no markup superfluo no hacks

Marco Pontili
Marco Pontili

scusate: il vantaggio rispetto a quelle già  note? Grazie!

luca
luca