Egenskaben word-break

Egenskaben word-break tillader at flytte bogstaver fra et langt ord over på en ny linje, hvis ordet ikke kan være i containeren på grund af bredden.

Syntaks

cssselektor {
  word-break: break-all | keep-all | 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 stikke ud over dens grænser (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 . Værdien break-all

Men nu vil de bogstaver, som ikke kunne være, blive flyttet til næste 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å