CSS3 Text Overflow: způsob přetékání textu

Vytečkování textu, který přesahuje šířku elementu.

text-overflow:
  ( clip | ellipsis | <_retezec_> );

Když na školeních ukazuji text-overflow: ellipsis, opakuje se vždy stejný scénář. Polovina účastníků zívá: „Hm, tohle používám už dva roky…“ A druhá polovina? Nadšeně si píše: „Musím použít hned zítra!“

Reklama: Vzhůru do lepší práce

Hodnota ellipsis má háček — aktuálně je možné ji použít jen na vytečkování jednořádkového textu na blokových elementech. I tak je to ale velmi užitečný pomocník.

Příklad s navigací

Představte si navigační lištu, kdy v každém případě potřebujete, aby text neskočil na další řádek. A jeho délku, stejně jako šířku boxu, ve kterém se objevuje, neznáte.

Pak stačí ellipsis doplnit o dvě další deklarace zajišťující „jednořádkovost“:

.element {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

Zkuste si naživo změnit velikost okna v příkladu na cdpn.io/e/FeLkJ.

Podpora v prohlížečích

text-overflow: ellipsis má podporu od IE6, takže není co řešit.

Poznámka: Ukázky kódu v článku obsahují pouze standardní syntaxi podle CSS3 norem. Ve některých případech je potřeba použít vendor prefix varianty. Na aktuální situaci se podívejte na shouldiprefix.com.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategorii CSS.

PostCSS jako jednoduchá náhrada preprocesoru

16. 2. 2017 v příručce

Jak PostCSS využít jako jednoduchý a rychlý preprocesor, který vám na spoustu projektů výborně poslouží. A proč ne CSSnext?

Jak v NejŘemeslníci.cz používají Tachyons

7. 2. 2017 na blogu

Matouš Borák z NejŘemeslníci.cz popisuje zkušenosti svého týmu s Tachyons, knihovnou atomických stylů.

Veřejná školení

Dnešní webová kodéřina

Dnešní webová kodéřina

Kurz, který aktualizuje vaše znalosti webové kodéřiny. Citlivě mixuje novinky jako CSS3, Flexbox nebo SVG a osvědčené postupy. Ty nejdůležitější části si sami vyzkoušíte. Příští termín: 23. února.

9. března Responzivní design
23. března Optimalizace rychlosti načítání
4. dubna SVG
20. dubna Bootstrap
11. května Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč

Kurz kodéřiny
Poznejte CSS3, Grunt,
SVG, Flexbox, HTML5
a další technologie
na kurzu autora.