თვისება overflow-wrap

თვისება overflow-wrap საშუალებას აძლევს გადაიტანოს გრძელი სიტყვის ასოები ახალ ხაზზე, თუ ეს სიტყვა არ ჯდება კონტეინერის სიგანეში.

სინტაქსი

სელექტორი {
	overflow-wrap: break-word | normal;
}

მნიშვნელობა	აღწერა
`break-word`	აიძულებს გრძელ სიტყვებს გადაიტანონ ახალ ხაზზე, თუ ეს სიტყვა არ ჯდება კონტეინერში. ამ შემთხვევაში სიტყვა დაიწყება ახალი ხაზიდან.
`normal`	სტანდარტული ქმედება: თუ გრძელი სიტყვა არ ჯდება კონტეინერის სიგანეში - ის უბრალოდ გამოვა მის საზღვრებს გარეთ (ამ შემთხვევაში დაიწყება ახალი ხაზიდან).

მნიშვნელობა ნაგულისხმევად: normal.

ამ მაგალითში ძალიან გრძელი სიტყვა არ ჯდება კონტეინერში და გამოვა მის საზღვრებს გარეთ (ამ შემთხვევაში დაიწყება ახალი ხაზიდან):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	word-wrap: normal;
	overflow-wrap: normal;
	border: 1px solid red;
	width: 200px;
}

ახლა კი ის ასოები, რომლებიც არ ჯდებოდნენ, უბრალოდ გადაიტანება შემდეგ ხაზზე (ამ შემთხვევაში გრძელი სიტყვა მაინც დაიწყება ახალი ხაზიდან):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	overflow-wrap: break-word;
	border: 1px solid red;
	width: 200px;
}

თვისება word-break,
რომელიც ასევე საშუალებას აძლევს გადაიტანოს გრძელი სიტყვის ასოები ახალ ხაზზე
თვისება word-wrap,
რომელიც არის თვისება overflow-wrap-ის მოძველებული სახელწოდება
თვისება hyphens,
რომელიც ჩართავს სიტყვების გადატანას მარცვალებით
ტეგი wbr,
რომელიც ახორციელებს რბილ გადატანებს HTML-ის საშუალებით
ტეგი br,
რომლის დახმარებითაც შესაძლებელია იძულებით აიძულო ტექსტის ახალ ხაზზე გადატანა