Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
CSS3 - tekst

CSS3 - text-overflow

Email Drukuj PDF

Tematy: hanging-punctuation | punctuation-trim | text-align-last | text-emphasis | text-justify | text-outline | text-overflow | text-shadow | text-wrap | word-break | word-wrap

Dane w pigułce
Zastosowanie Określa sposób wyświetlania skróconego tekstu
Dziedziczenie nie
Wartości clip, ellipsis, string
Wartość domyślna clip
Przykład text-overflow: ellipsis
Składnia JavaScript object.style.textOverflow="ellipsis"

Aby zdefiniować sposób wyświetlania skróconego tekstu, należy wpisać w definicji stylu text-overflow: wartość

Niekiedy zdarza się, że tekst nie mieści się w ograniczonym pojemniku i trzeba zasygnalizować, że poza pojemnikiem jest ciąg dalszy. Typowym zastosowaniem może być pozycja menu. Styl oferuje trzy wartości - ellipsis generuje wielokropek, clip przycina tekst, natomiast string tworzy zastępczą reprezentację.

Styl najwygodniej jest zdefiniować w części nagłówkowej dokumentu lub w zewnętrznym arkuszu stylów, tworząc specjalną klasę. Przykładowo:

div.przyciecie {
	white-space: nowrap; 
	width: 14em; 
	height: 1.6em; 
	overflow: hidden; 
}
div.przyciecie:hover {
	overflow: visible;
}

Klasa "przyciecie" definiuje klasę pojemnika, który będzie zawierać przycinany tekst. Polecenie white-space:nowrap powoduje, że wiersz nie jest przełamywany w pojemniku, co jest np. typowe dla pozycji menu. Polecenie oveflow:hidden ukrywa część tekstu wypływającą poza zdefiniowany pojemnik. Hover jest pseudoklasą, ktora powoduje, że po nasunięciu kursora myszki nad tekst zostanie on doraźnie wyświetlony (overflow:visible).

Tworzymy teraz pojemnik, nadając mu klasę "przyciecie" i wybierając wartość text-overflow:ellipsis.

<div class="przyciecie" style="text-overflow: ellipsis;"><a href="http://www.helion.pl">
Pod tym adresem jest internetowa strona wydawnictwa Helion.</a></div>

W analogiczny sposób, wybierając jednak wartość text-overflow:clip, tworzymy tekst przycięty, bez wielokropka.

Zauważ, że po nasunięciu kursora nad tekst zobaczysz jego pełną treść.

Wartość string nie jest na razie interpretowana.


Interpretacja: Internet Explorer, Opera, Chrome, Safari.

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V