Egenskapen overflow-wrap

Egenskapen overflow-wrap tillåter att bokstäver i ett långt ord flyttas till en ny rad om ordet inte får plats i behållarens bredd.

Syntax

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

Värden

Standardvärde: normal.

Exempel . Värdet normal

I detta exempel kommer ett mycket långt ord inte att få plats i behållaren och kommer att sticka ut utanför dess kanter (det kommer att börja på en ny rad):

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

Результат:

Exempel . Värdet break-word

Och nu kommer de bokstäver som inte fick plats att flyttas till nästa rad (det långa ordet kommer fortfarande att börja på en ny rad):

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