თვისება 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;
}

Результат:

იხილეთ აგრეთვე