Have You Tried IT ?

Information Technology from scratch

Ukrywanie tekstu za pomocą CSS

Dodano przez Kategoria: HTML / CSS

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.

 

2 komentarze

  1. Dawid Odpowiedz

    Sposób znam od dawna, czasem się przydaje jednak czasem często na szybko ustawiam po prostu font-size: 0; 🙂

  2. Damian Odpowiedz

    A ja nie korzystałem z tego wcześniej 🙂

    ale połączenie wszystkiego daje super efekt.
    Dzięki za dobry pomysł

Dodaj komentarz

XHTML: Dozwolone znaczniki: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="">