Svojstvo word-break

Svojstvo word-break omogućava da se slova dugačke reči prelome u novi red, ako ta reč ne staje u širinu kontejnera.

Sintaksa

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

Vrednost	Opis
`break-all`	Primorava dugačke reči da se prelome u novi red, ako ta reč ne staje u kontejner.
`keep-all`	Za prelom hijeroglifa.
`normal`	Standardno ponašanje: ako dugačka reč ne staje po širini u kontejner - ona će jednostavno izaći izvan njegove granice (pri tome će početi iz novog reda).

Podrazumevana vrednost: normal.

U ovom primeru veoma dugačka reč neće stati u kontejner i izaći će izvan njegovih granica (pri tome će početi iz novog reda):

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 sada će se ta slova koja nisu stajala, jednostavno prelomiti u sledeći red:

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;
}

Результат:

svojstvo overflow-wrap,
koje takođe omogućava prelom slova dugačke reči u novi red
svojstvo hyphens,
koje uključuje prelom reči po slogovima
svojstvo overflow,
koje odseca delove koji izlaze izvan granice bloka
tag wbr,
koji realizuje meke prelome pomoću HTML-a
tag br,
pomoću koga se može prinudno naterati tekst da pređe u novi red