Moderní tvorba webových aplikací

O webu

Zalamování dlouhých slov

Jak si poradit s dlouhými slovy, které by mohly narušit layout stránky.

5 minut

Při vytváření layoutu webové stránky i aplikace čelíme výzvě, jak vyřešit stav, kdy se text nevejde do stanoveného prostoru. Zvlášť v případě, kdy mají návštěvníci možnost vkládat obsah na stránku, je tento problém rozhodně nutné řešit.

Krátký obsah

NějakéHodněDlouhéSlovoCoSeDoSloupceNevejde

Na ukázce je vidět, jak i při nastavení šířky text z obalu vyleze.

Možná řešení

CSS vlastnost word-wrap

element {
  word-wrap: break-word;
}

NějakéHodněDlouhéSlovoCoSeDoSloupceNevejde

Zalamování textu v tabulkách

Problém s tímto řešením může nastat v tabulce, kde word-wrap zdánlivě nic nedělá.

NějakéHodněDlouhéSlovoCoSeDoSloupceNevejde

Řešení je nastavit buňce maximální šířku (max-width) třeba na nulu:

NějakéHodněDlouhéSlovoCoSeDoSloupceNevejde

Nebo použít fixní layout tabulky (table-layout: fixed):

NějakéHodněDlouhéSlovoCoSeDoSloupceNevejde

Vlastnost word-break

I v jiných případech nemusí fungovat word-wrap. Třeba element s display: inline-block obsahující dlouhé slovo klidně vyleze ze svého rodiče.

Tento problém vyřeší word-break.

element {
  word-break: break-all;
}

CSS vlastnost hyphens

Vlastnost hyphens s problémem nijak nepomůže.

Oříznutí overflow: hidden

element {
  overflow: hidden;
}

Přetékání nastavené na hodnotu hidden sice problém vyřeší, ale obsah zmizí.

NějakéHodněDlouhéSlovoCoSeDoSloupceNevejde

Další tipy jsou v samostatném článku Oříznutí textu.

Rozdělení na straně serveru

V PHP je možné funkcí wordwrap automaticky rozdělit dlouhá slova v textu.

// Slovo delší 50 znaků rozdělí mezerou
$text = wordwrap($text, 50, " ", true);

U tohoto řešení je si potřeba dát pozor na pár věcí:

  1. Používat ho jen na výstupu. To zjednoduší případnou změnu čísla udávajícího počet znaků.

  2. Rozlámání slov rozbije odkazy. Zatímco dlouhá slova nemají moc opodstatnění, v případě odkazů je situace jiná. Typicky mívají minimálně desítky znaků, někdy se ale může délka blížit i stovce (tato stránka má URL dlouhou znaků).

    Řešením je odkazy převádět na klikací a text odkazu zkrátit. Osobně mi ale přijde lepší použít CSS, protože ani slova rozlámaná na určitý počet nejsou zárukou správného zobrazení. Stačí mít v prohlížeči nebo operačním systému větší písmo a přesně spočítaný počet znaků bude k ničemu.

Výška řádku line-height

Při možnosti, že se text rozdělí na více řádku, je velmi vhodné použít rozumnou hodnotu CSS vlastnosti line-height.

Jinak budou jednotlivé řádky na sebe nepěkně nalepeny.

Dva ošklivě
nalepené řádky.

Související články

Znázornění možnosti scrollování

Jak dát uživateli informaci, že je možné někam scrollovat.

10 minut

Plynulé scrollování na obsah

Jak vytvořit plynulé odrolování na určitou část stránky.

6 minut

Různá šířka <input type=number> s min/max

Proč má <input type=number> různou výchozí šířku v závislosti na min/max atributech.

3 minuty

Poskakování stránky kvůli posuvníku

Jak zabránit, aby obsah stránky poskakoval v závislosti na posuvníku.

8 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025