Zalomení slova - Triky CSS | Almanach CSS 2025

word-breakVlastnost CSS může být použita ke změně, když konce řádků by měl nastat. Za normálních okolností se zalomení řádků v textu může vyskytovat pouze v určitých mezerách, například když je mezera nebo pomlčka.

V níže uvedeném příkladu můžeme word-breakmísto toho vytvořit písmena mezi:

p ( word-break: break-all; )

Pokud nastavíme šířku textu na jednu em, slovo se zalomí o každé písmeno:

Podívejte se na text Nastavení pera svisle s přerušením slov pomocí CSS-Tricks (@ css-tricks) na CodePen.

Tato hodnota se často používá na místech s obsahem generovaným uživatelem, aby dlouhé řetězce neriskovaly narušení rozložení. Velmi běžným příkladem je dlouhá kopie a vložená adresa URL. Pokud tato adresa URL nemá žádné spojovníky, může přesahovat nadřazené pole a vypadat špatně nebo horší, způsobit problémy s rozložením.

Podívejte se na odkazy Fix Fix with word-break od CSS-Tricks (@ css-tricks) na CodePen.

Hodnoty

normal: použít výchozí pravidla pro dělení slov.
break-all: jakékoli slovo / písmeno se může rozdělit na další řádek.
keep-all: pro čínská, japonská a korejská textová slova nejsou porušena. Jinak je to stejné jako normal.

Tato vlastnost se také často používá ve spojení s vlastností spojovníků, takže když dojde k přerušení, vloží se hypen, podle standardu v knihách.

Plné využití s požadovanými předponami dodavatelů je:

 -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

Použití těchto vlastností na univerzálním voliči může být užitečné, pokud máte web se spoustou obsahu generovaného uživateli. Přestože je to spravedlivé varování, na názvech a předformátovaném textu to může vypadat divně (

Příbuzný

přetékání
pomlčky
prázdné znaky
Zpracování dlouhých slov a URL

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.