Egenskapen word-break

Egenskapen word-break låter dig bryta bokstäverna i ett långt ord på en ny rad, om detta ord inte får plats i behållarens bredd.

Syntax

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

Värden

Standardvärde: normal.

Exempel . Värdet normal

I detta exempel kommer ett väldigt långt ord inte att få plats i behållaren och kommer att sticka ut utanför dess gränser (och börjar på en ny rad):

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

Результат:

Exempel . Värdet break-all

Och nu kommer de bokstäver som inte fick plats att brytas på nästa rad:

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 även