Egenskapen word-break

Egenskapen word-break tillater å bryte bokstavene i et langt ord over på en ny linje, hvis ordet ikke får plass i beholderens bredde.

Syntaks

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

Verdier

Standardverdi: normal.

Eksempel . Verdien normal

I dette eksemplet vil et veldig langt ord ikke få plass i beholderen og vil stikke utenfor dens grenser (mens det starter på en ny linje):

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

Результат:

Eksempel . Verdien break-all

Men nå vil de bokstavene som ikke fikk plass, enkelt og greit bli flyttet til neste linje:

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

Результат:

Se også