Īpašība text-overflow

Īpašība text-overflow pievieno daudzpunkti apgrieztā teksta beigās kā pazīmi, ka teksts neietilpa blokā un tika apgriezts.

Lai īpašība darbotos, tekstam jābūt apgrieztam ar īpašību overflow vai īpašību overflow-x ar vērtību hidden, auto vai scroll. Ja ir iestatīts visible (kas ir noklusējuma vērtība) - text-overflow nedarbosies.

Sintakse

selektors {
	text-overflow: ellipsis | clip;
}

Vērtības

Vērtība	Apraksts
`ellipsis`	Apgrieztā teksta beigās pievieno daudzpunkti.
`clip`	Nepievieno daudzpunkti beigās (šī ir noklusējuma vērtība, nepieciešama, lai atceltu īpašības darbību nepieciešamības gadījumā).

Noklusējuma vērtība: clip.

Piemērs . Teksts, kas izkļūst ārpus robežām

Šajā piemērā ļoti garš vārds neietilps konteinerā un izkļūs ārpus tā robežām. Apgriešana nenotiek:

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

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

Piemērs . Pievienosim īpašību overflow

Tagad viss, kas izkļuvis ārpus konteinera robežām, vienkārši tiks apgriezts:

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

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

Piemērs . Vērtība ellipsis

Tagad papildus īpašībai overflow pievienosim vēl text-overflow ar vērtību ellipsis. Apgrieztajam tekstam beigās tiks pievienots daudzpunktis:

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

Piemērs . Ar ritjoslām

Ja iestatīsiet overflow: auto un text-overflow: ellipsis, tad parādīsies ritjosla, bet daudzpunktis joprojām tiks pievienots. Mēģiniet ritināt ritjoslu piemērā:

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

Piemērs . Ja nav ļoti garu vārdu

Ja nav tik garu vārdu, lai tie izkļūtu ārpus konteinera robežām, tad apgriešana nenotiks (nekas taču neizkļūst). Apskatiet šo piemēru:

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

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

Piemērs . Teksts vienā rindā

Tomēr ir situācijas, kad mēs vēlamies, lai teksts tiktu apgriezts, ja tas ir pārāk garš (teksts kopumā, nevis atsevišķi vārdi) un neietilpst vienā rindā. To panāk ar īpašības white-space pievienošanu ar vērtību nowrap, kas aizliedz teksta pārnešanu uz citu rindu. Apskatiet piemēru, tagad teksts tiek apgriezts:

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

Piemērs . Platums procentos

Ja iestatāt bloka platumu %, tad apgriešana arī darbosies korekti:

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

Skatiet arī

īpašības word-break un overflow-wrap,
kas ļauj pārnest garā vārda burtus uz jaunu rindu
īpašība hyphens,
kas ieslēdz vārdu pārnešanu pa zilbēm
īpašība overflow,
kas apgriež ārpus bloka robežām izkļuvušās daļas