Vlastnost word-break

Vlastnost word-break umožňuje zalomit písmena dlouhého slova na nový řádek, pokud se toto slovo nevejde do šířky kontejneru.

Syntaxe

cssselektor {
  word-break: break-all | keep-all | normal;
}

Hodnota	Popis
`break-all`	Přinutí dlouhá slova zalomit se na nový řádek, pokud se slovo nevejde do kontejneru.
`keep-all`	Pro zalomení znaků (např. pro japonštinu, čínštinu, korejštinu).
`normal`	Standardní chování: pokud se dlouhé slovo nevejde do šířky kontejneru - jednoduše přesáhne jeho hranice (přičemž začne na novém řádku).

Výchozí hodnota: normal.

V tomto příkladu se velmi dlouhé slovo nevejde do kontejneru a přesáhne jeho hranice (přičemž začne na novém řádku):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  word-break: normal;
  border: 1px solid red;
}

Результат:

A nyní se ta písmena, která se nevešla, jednoduše zalomí na následující řádek:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  word-break: break-all;
  border: 1px solid red;
}

Результат:

vlastnost overflow-wrap,
která také umožňuje zalomit písmena dlouhého slova na nový řádek
vlastnost hyphens,
která zapíná dělení slov podle slabik
vlastnost overflow,
která ořezává části přesahující přes hranici bloku
značka wbr,
která implementuje měkká zalomení pomocí HTML
značka br,
pomocí které lze vynutit zalomení textu na nový řádek