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 հատկությունը,
որը կտրում է բլոկի սահմաններից դուրս ցցված մասերը