Vlastnost overflow-wrap

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

Syntaxe

cssselektor {
  overflow-wrap: break-word | normal;
}

Hodnoty

Výchozí hodnota: normal.

Příklad . 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 {
  word-wrap: normal;
  overflow-wrap: normal;
  border: 1px solid red;
  width: 200px;
}

Результат:

Příklad . Hodnota break-word

A nyní se ta písmena, která se nevešla, jednoduše přenesou na následující řádek (přičemž dlouhé slovo bude stále začínat na novém řádku):

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

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

Результат:

Viz také