Moderní tvorba webových aplikací

O webu

CSS hyphens

Vlastnosti hyphens ovlivňuje rozdělování slov spojovníkem na konci řádku.

3 minuty

V HTML je možné určitými znaky vytvořit uprostřed slova místo, kde se může zalomit řádek uprostřed slova.

  • entitou ­,
  • číselnou entitou ­,
  • číselnou entitou ​,
  • další mezery jsou na Wikipedii.
<p>
  Text odstavce, který se může za&shy;lo&shy;mit uprostřed slova „zalomit“.
</p>

CSS vlastnost hyphens může nabývat hodnoty:

none
Prohlížeč bude příležitosti k zalomení (např. entitu &shy; uprostřed slova) ignorovat.
manual
Výchozí hodnota. Slova se zalamují v místech, kde je příležitost vytvořená zalamovací entitou.
auto
Prohlížeč může slovo rozdělit spojovníkem, kde uzná za vhodné. Prohlížeče, které umí rozdělovat slo-va po slabikách, při nastavení hyphens: auto toto rozdělování zapnou i bez nutnosti zanést kód rozdělovacími entitami.

Zajímavá je kombinace hyphens: auto s text-align: justify (zarovnání do bloku). Výsledný text vypadá lépe, protože zalamování slov nevytváří takové řeky (nepěkně velké mezery mezi slovy).

Podpora

Momentálně nejlepší podpora (s prefixy) pro český text je v IE 10 a IE 11. Opera a Chrome nastavení hyphens, zdá se, ignoruje. A ve Firefoxu se u češtiny chová manual i auto stejně (v jiných jazycích rozdělovat umí).

Živá ukázka (zdroj českého lipsum textu), varianta zarovnaná do bloku.

Doporučení

Příliš nedoporučuji zanášet kód entitami pro rozdělování. Může to způsobit problém při hledání slov na stránce, při kopírování textu nebo (možná) u vyhledávačů (související diskuse Má někdo zkušenosti s entitou shy?).

Odkazy

Související články

Má smysl měnit kursor tlačítek?

Tlačítka mají na webu po najetí jiný kursor než odkazy.

4 minuty

Stylování <input type=number>

Jak stylovat <input> pro zadávání čísel.

7 minut

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

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