Proprietatea text-overflow

Proprietatea text-overflow adaugă puncte de suspensie la sfârșitul textului decupat ca semn că textul nu a încăput în bloc și a fost decupat.

Pentru ca proprietatea să funcționeze, textul trebuie să fie decupat prin proprietatea overflow sau proprietatea overflow-x cu valoarea hidden, auto sau scroll. Dacă este setat visible (așa este în mod implicit) - text-overflow nu va funcționa.

Sintaxă

selector {
	text-overflow: ellipsis | clip;
}

Valori

Valoare	Descriere
`ellipsis`	Adaugă puncte de suspensie la sfârșitul textului decupat.
`clip`	Nu adaugă puncte de suspensie la sfârșit (aceasta este valoarea implicită, este necesară pentru a anula acțiunea proprietății atunci când este necesar).

Valoare implicită: clip.

Exemplu . Text care depășește

În acest exemplu, un cuvânt foarte lung nu va încăpea în container și va depăși granițele acestuia. Nu are loc nicio tăiere:

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

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

Exemplu . Să adăugăm proprietatea overflow

Acum, tot ce depășește granițele containerului va fi pur și simplu decupat:

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

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

Exemplu . Valoarea ellipsis

Acum, în plus față de proprietatea overflow adaugăm și text-overflow cu valoarea ellipsis. Textului decupat i se vor adăuga puncte de suspensie la sfârșit:

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

Exemplu . Cu bare de derulare

Dacă setați overflow: auto și text-overflow: ellipsis, atunci va apărea o bară de derulare, dar punctele de suspensie vor fi în continuare adăugate. Încercați să derulați bara de derulare din exemplu:

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

Exemplu . Dacă nu există cuvinte foarte lungi

Dacă nu există cuvinte suficient de lungi încât să depășească granița containerului, atunci decuparea nu va avea loc (nimic nu depășește). Uitați-vă la următorul exemplu:

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

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

Exemplu . Text pe o singură linie

Cu toate acestea, există situații în care dorim ca textul să fie decupat dacă este prea lung (întregul text, nu cuvinte individuale) și să nu fie mutat pe linia următoare. Acest lucru se face prin adăugarea proprietății white-space cu valoarea nowrap, care va interzice mutarea textului pe o altă linie. Uitați-vă la exemplu, acum textul este decupat:

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

Exemplu . Lățimea în procente

Dacă setați lățimea blocului în %, atunci decuparea va funcționa și ea corect:

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

Vezi și

proprietățile word-break și overflow-wrap,
care permit mutarea literelor unui cuvânt lung pe o linie nouă
proprietatea hyphens,
care activează despărțirea cuvintelor în silabe
proprietatea overflow,
care decupează părțile care depășesc granița blocului