Savybė text-overflow

Savybė text-overflow prideda daugtaškį nukirinto teksto pabaigoje kaip ženklą, kad tekstas netilpo į bloką ir buvo nukirintas.

Kad savybė veiktų, tekstas turi būti nukirintas naudojant savybę overflow arba savybę overflow-x reikšmėje hidden, auto arba scroll. Jei nustatyta visible (o taip yra pagal nutylėjimą) - text-overflow neveiks.

Sintaksė

selektorius {
	text-overflow: ellipsis | clip;
}

Reikšmės

Reikšmė	Aprašas
`ellipsis`	Prideda daugtaškį nukirinto teksto pabaigoje.
`clip`	Prideda daugtaškį nukirinto teksto pabaigoje (tai reikšmė pagal nutylėjimą, reikalinga norint atšaukti savybės veikimą esant poreikiui).

Reikšmė pagal nutylėjimą: clip.

Pavyzdys . Išsikišantis tekstas

Šiame pavyzdyje labai ilgas žodis netilps į konteinerį ir išsikiš už jo ribų. Nukirpimo neįvyks:

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

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

Pavyzdys . Pridėkime savybę overflow

Dabar viskas, kas išsikišo už konteinerio ribų, bus tiesiog nukirpta:

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

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

Pavyzdys . Reikšmė ellipsis

Dabar, papildomai prie savybės overflow, pridėsime ir text-overflow reikšmėje ellipsis. Nukirptam tekstui bus pridėtas daugtaškis pabaigoje:

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

Pavyzdys . Su slinkimo juostomis

Jei nustatyti overflow: auto ir text-overflow: ellipsis, tuomet atsiras slinkimo juosta, bet daugtaškis vis tiek bus pridėtas. Pabandykite paslinkti slinkimo juostą pavyzdyje:

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

Pavyzdys . Jei nėra labai ilgų žodžių

Jei nėra tų ilgų žodžių, kad jie išsikištų už konteinerio ribų, tuomet nukirpimo neįvyks (niekas gi neišsikiša). Pažiūrėkite šį pavyzdį:

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

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

Pavyzdys . Tekstas vienoje eilutėje

Tačiau būna situacijų, kai mes norime, kad tekstas būtų nukirptas, jei jis per ilgas (apskritai tekstas, o ne atskiri žodžiai) ir ne perkeltas į kitą eilutę. Tai daroma pridedant savybę white-space reikšmėje nowrap, kuri uždraus teksto perkėlimą į kitą eilutę. Pažiūrėkite į pavyzdį, dabar tekstas nukirpamas:

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

Pavyzdys . Plotis procentais

Jei nustatyti bloko plotį %, tuomet nukirpimas taip pat veiks korektiškai:

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

Taip pat žiūrėkite

savybės word-break ir overflow-wrap,
kurios leidžia perkelti ilgo žodžio raides į naują eilutę
savybė hyphens,
kuri įjungia žodžių perkėlimą pagal skiemenis
savybė overflow,
kuri nukirpa išsikišusias už bloko ribų dalis