Overflow-wrap-ominaisuus

Ominaisuus overflow-wrap mahdollistaa pitkän sanan kirjainten siirtämisen uudelle riville, jos sana ei mahdu säiliön leveyteen.

Syntaksi

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

Arvot

Oletusarvo: normal.

Esimerkki . Arvo normal

Tässä esimerkissä erittäin pitkä sana ei mahdu säiliöön ja ulottuu sen rajojen ulkopuolelle (ja alkaa uudelta riviltä):

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

Результат:

Esimerkki . Arvo break-word

Nyt ne kirjaimet, jotka eivät mahtuneet, siirretään yksinkertaisesti seuraavalle riville (ja pitkä sana alkaa silti uudelta riviltä):

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

Результат:

Katso myös