Īpašība overflow-wrap

Īpašība overflow-wrap ļauj pārnest gara vārda burtus uz jaunu rindu, ja šis vārds neietilpst konteinera platumā.

Sintakse

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

Vērtības

Noklusējuma vērtība: normal.

Piemērs . Vērtība normal

Šajā piemērā ļoti garš vārds neietilps konteinerā un izkļūs aiz tā robežām (šajā gadījumā tas sāksies no jaunas rindas):

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

Результат:

Piemērs . Vērtība break-word

Bet tagad tie burti, kas neietilpa, tiks vienkārši pārnesti uz nākamo rindu (šajā gadījumā garš vārds joprojām sāksies no jaunas rindas):

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

Результат:

Skatiet arī