თვისება text-overflow

თვისება text-overflow ამატებს ელიფსისს ამოჭრილი ტექსტის ბოლოს იმის ნიშნად, რომ ტექსტი არ ეტეოდა ბლოკში და ამოიჭრა.

თვისების მუშაობისთვის ტექსტი უნდა იყოს ამოჭრილი თვისების overflow ან თვისების overflow-x მეშვეობით მნიშვნელობებში hidden, auto ან scroll. თუ მითითებულია visible (რაც სტანდარტულად არის) - text-overflow არ იმუშავებს.

სინტაქსი

სელექტორი {
	text-overflow: ellipsis | clip;
}

მნიშვნელობები

მნიშვნელობა	აღწერა
`ellipsis`	ამატებს ელიფსისს ამოჭრილი ტექსტის ბოლოს.
`clip`	არ ამატებს ელიფსისს ბოლოს (ეს არის სტანდარტული მნიშვნელობა, საჭიროა თვისების მოქმედების გასაუქმებლად საჭიროების შემთხვევაში).

სტანდარტული მნიშვნელობა: clip.

მაგალითი . გამორბენილი ტექსტი

ამ მაგალითში ძალიან გრძელი სიტყვა ვერ ჩაიტევა კონტეინერში და გადმორბენს მის საზღვრებს. ამოჭრა არ ხდება:

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

#elem {
	width: 200px;
	overflow: visible;
	border: 1px solid red;
}

მაგალითი . დავამატოთ თვისება overflow

ახლა ყველაფერი, რაც გადმორბენს კონტეინერის საზღვრებს, უბრალოდ ამოიჭრება:

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

#elem {
	width: 200px;
	overflow: hidden;
	border: 1px solid red;
}

მაგალითი . მნიშვნელობა ellipsis

ახლა თვისების overflow გარდა დავამატოთ text-overflow მნიშვნელობაში ellipsis. ამოჭრილ ტექსტს დაემატება ელიფსისი ბოლოს:

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

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

მაგალითი . გადახვევის ზოლებით

თუ დავაყენებთ overflow: auto და text-overflow: ellipsis, მაშინ გამოჩნდება გადახვევის ზოლი, მაგრამ ელიფსისი მაინც დაემატება. სცადეთ გადახვევის ზოლის გადახვევა მაგალითში:

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

#elem {
	width: 200px;
	overflow: auto;
	text-overflow: ellipsis;
	border: 1px solid red;
}

მაგალითი . თუ არ არის ძალიან გრძელი სიტყვები

თუ არ არის ისეთი გრძელი სიტყვები, რომ გადმორბენდნენ კონტეინერის საზღვრებს, მაშინ ამოჭრა არ მოხდება (არაფერი გადმორბენს). შეხედეთ შემდეგ მაგალითს:

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

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

მაგალითი . ტექსტი ერთ სტრიქონში

თუმცა, არის სიტუაციები, როდესაც ჩვენ გვსურს, რომ ტექსტი ამოიჭრას, თუ ის ძალიან გრძელია (ტექსტი საერთოდ, და არა ცალკეული სიტყვები) და არ გადავიდეს შემდეგ სტრიქონზე. ეს კეთდება თვისების white-space დამატებით მნიშვნელობაში nowrap, რომელიც აუკრძალავს ტექსტის გადატანას სხვა სტრიქონზე. შეხედეთ მაგალითს, ახლა ტექსტი იჭრება:

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

#elem {
	width: 200px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

მაგალითი . სიგანე პროცენტებში

თუ ბლოკის სიგანეს %-ში დავაყენებთ, ამოჭრა ასევე იმუშავებს კორექტულად:

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

#elem {
	width: 80%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

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

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