overflow-wrap қасиеті

overflow-wrap қасиеті контейнердің еніне сыймайтын ұзақ сөздің әріптерін жаңа жолға көшіруге мүмкіндік береді.

Синтаксис

cssселектор {
  overflow-wrap: break-word | normal;
}

Мәндері

Әдепкі мәні: normal.

Мысал . normal мәні

Бұл мысалда өте ұзақ сөз контейнерге сыймайды және оның шекарасынан шығып кетеді (бұл ретте ол жаңа жолдан басталады):

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

Результат:

Мысал . break-word мәні

Ал енді сыймаған әріптер жай ғана келесі жолға көшіріледі (бұл ретте ұзақ сөз бәрібір жаңа жолдан басталады):

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

Результат:

Сондай-ақ қараңыз