Egenskapen overflow-wrap

Egenskapen overflow-wrap tillater å flytte bokstavene i et langt ord til en ny linje, hvis ordet ikke får plass i containerens bredde.

Syntaks

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

Verdier

Standardverdi: normal.

Eksempel . Verdien normal

I dette eksemplet vil et veldig langt ord ikke få plass i containeren og vil flyte utover dens grenser (men 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 . Verdien break-word

Nå vil de bokstavene som ikke fikk plass, blir flyttet til neste linje (men det lange ordet vil fortsatt 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å