Vetia text-overflow

Vetia text-overflow shton tre pika në fund të tekstit të shkurtuar si shenjë se teksti nuk përshtatej në bllok dhe u shkurtua.

Që vetia të funksionojë, teksti duhet të jetë i shkurtuar përmes vetisë overflow ose vetisë overflow-x në vlerën hidden, auto ose scroll. Nëse është vendosur visible (dhe kjo është vlera e paracaktuar) - text-overflow nuk do të funksionojë.

Sintaksa

përzgjedhësi {
	text-overflow: ellipsis | clip;
}

Vlerat

Vlera	Përshkrimi
`ellipsis`	Shton tre pika në fund të tekstit të shkurtuar.
`clip`	Nuk shton tre pika në fund (kjo është vlera e paracaktuar, nevojitet për të anuluar veprimin e vetisë kur është e nevojshme).

Vlera e paracaktuar: clip.

Shembull . Teksti që del jashtë

Në këtë shembull, një fjalë shumë e gjatë nuk do të përshtatet në enë dhe do të dalë jashtë kufijve të saj. Nuk ndodh shkurtim:

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

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

Shembull . Le të shtojmë vetinë overflow

Tani, çdo gjë që del jashtë kufijve të enës, thjesht do të shkurtohet:

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

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

Shembull . Vlera ellipsis

Tani, përveç vetisë overflow le të shtojmë edhe text-overflow në vlerën ellipsis. Tekstit të shkurtuar do t'i shtohen tre pika në fund:

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

Shembull . Me shirita rrëshqitës

Nëse vendosni overflow: auto dhe text-overflow: ellipsis, atëherë do të shfaqet një shirit rrëshqitës, por tre pikat ende do të shtohen. Provoni të rrëshqisni shiritin rrëshqitës në shembull:

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

Shembull . Nëse nuk ka fjalë shumë të gjata

Nëse nuk ka fjalë aq të gjata sa të dalin jashtë kufirit të enës, atëherë shkurtimi nuk do të ndodhë (asgjë nuk del jashtë). Shikoni shembullin e mëposhtëm:

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

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

Shembull . Teksti në një rresht

Megjithatë, ka situata kur ne duam që teksti të shkurtohet nëse është shumë i gjatë (teksti në përgjithësi, jo fjalët individuale) dhe të mos transferohet në rreshtin tjetër. Kjo bëhet duke shtuar vetinë white-space në vlerën nowrap, e cila ndalon transferimin e tekstit në një rresht tjetër. Shikoni shembullin, tani teksti shkurtohet:

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

Shembull . Gjerësia në përqindje

Nëse vendosni gjerësinë e bllokut në %, atëherë shkurtimi do të funksionojë gjithashtu siç duhet:

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

Shihni gjithashtu

vetitë word-break dhe overflow-wrap,
të cilat lejojnë transferimin e shkronjave të një fjale të gjatë në një rresht të ri
vetia hyphens,
e cila aktivizon ndarjen e fjalëve në rrokje
vetia overflow,
e cila shkuron pjesët që dalin jashtë kufirit të bllokut