Ominaisuus word-break

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

Syntaksi

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

Arvo	Kuvaus
`break-all`	Pakottaa pitkät sanat siirtymään uudelle riville, jos sana ei mahdu säiliöön.
`keep-all`	Käytetään kiinalaisten merkkien rivinvaihtoon.
`normal`	Oletuskäyttäytyminen: jos pitkä sana ei mahdu leveyteen säiliössä - se simplementi ulottuu sen rajan yli (samalla alken uudelta riviltä).

Oletusarvo: normal.

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

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

Результат:

Nyt ne kirjaimet, jotka eivät mahtuneet, siirretään seuraavalle riville:

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

Результат:

ominaisuus overflow-wrap,
joka myös mahdollistaa pitkän sanan kirjainten siirtämisen uudelle riville
ominaisuus hyphens,
joka mahdollistaa sanojen tavutuksen
ominaisuus overflow,
joka leikkaa säiliön rajan yli ulottuvat osat
tagi wbr,
joka toteuttaa pehmeät rivinvaihdot HTML-keinoin
tagi br,
jolla voidaan pakottaa teksti siirtymään uudelle riville