Egenskaben overflow-wrap

Egenskaben overflow-wrap tillader at flytte bogstaverne i et langt ord til en ny linje, hvis ordet ikke kan være inde i containerens bredde.

Syntaks

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

Værdier

Standardværdi: normal.

Eksempel . Værdien normal

I dette eksempel vil et meget langt ord ikke kunne være i containeren og vil flyde over dens grænser (det vil starte på en ny linje):

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

Результат:

Eksempel . Værdien break-word

Men nu vil de bogstaver, som ikke kunne være, blive flyttet til den næste linje (det lange ord vil stadig starte på en ny linje):

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

Результат:

Se også