Każdy kto miał do czynienia z tworzeniem stron albo ma takie zboczenie, że czasem sobie przegląda źródła innych stron, spotkał się pewnie z taką sytuacją, że jakiś element HTML w źródle zawiera tekst, natomiast wizualnie nie widać go na stronie. Jest to stary zwyczaj i powszechnie stosowany np. przy linkach (<a>) blokowych, które zamiast tekstu wyświetlają jakiś obrazek (za pomocą background-image). Dzięki temu element może ładniej wyglądać zachowując semantykę kodu HTML.

Do tej pory korzystałem z takiej metody:

.hidetext {
	text-indent: -9999px;
	font-size: 0;
	line-height: 0;
}

Cały trick polega na tym, że dzięki ustawieniu takiej dużej wartości text-indent tekst jest przesuwany poza wyświetlany obszar. Sama definicja text-indent zazwyczaj wystarczy do ukrycia (przesunięcia) tekstu, natomiast jeszcze dla pewności wielkość tekstu i wysokość linii ustalam na 0.

Problem może się pojawić w przypadku przeglądarki Opera, która od jakiegoś czasu (zdaje się, że od wydania wersji 11 lub 12)  zaczęła ignorować „ekstremalnie” wysokie/niskie wartości dla text-indent. Doraźnym rozwiązaniem mogłoby być ustalenie koloru czcionki na bezbarwną (nie działa pod IE).  Jedyny mankament tego rozwiązania jest taki, że po zaznaczeniu tekstu (np. CTRL + a) staje się on widoczny.

color: transparent;

Jednak natknąłem się na tej stronie na ciekawsze i moim zdaniem lepsze rozwiązanie.

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

Jak to działa?

• tekst jest przesuwany poza dany element (tzn. początek tekstu jest na granicy elementu),
• nie ma możliwości łamania linii,
• wszystko co jest poza elementem jest ukrywane.