Proprietà text-overflow

La proprietà text-overflow aggiunge i puntini di sospensione alla fine del testo troncato per indicare che il testo non rientrava nel blocco ed è stato troncato.

Per il funzionamento della proprietà, il testo deve essere troncato tramite la proprietà overflow o la proprietà overflow-x con valore hidden, auto o scroll. Se è impostato visible (e così è per impostazione predefinita) - text-overflow non funzionerà.

Sintassi

selettore {
	text-overflow: ellipsis | clip;
}

Valori

Valore	Descrizione
`ellipsis`	Aggiunge i puntini di sospensione alla fine del testo troncato.
`clip`	Non aggiunge i puntini di sospensione alla fine (questo è il valore predefinito, serve per annullare l'azione della proprietà se necessario).

Valore predefinito: clip.

Esempio . Testo che fuoriesce

In questo esempio, una parola molto lunga non entrerà nel contenitore e fuoriuscirà dai suoi bordi. Non avviene alcun troncamento:

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

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

Esempio . Aggiungiamo la proprietà overflow

Ora, tutto ciò che fuoriesce dai bordi del contenitore, sarà semplicemente troncato:

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

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

Esempio . Valore ellipsis

Ora, oltre alla proprietà overflow aggiungiamo anche text-overflow con valore ellipsis. Al testo troncato verranno aggiunti i puntini di sospensione alla fine:

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

Esempio . Con le barre di scorrimento

Se si imposta overflow: auto e text-overflow: ellipsis, apparirà la barra di scorrimento, ma i puntini di sospensione verranno comunque aggiunti. Prova a scorrere la barra di scorrimento nell'esempio:

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

Esempio . Se non ci sono parole molto lunghe

Se non ci sono parole così lunghe da fuoriuscire dal bordo del contenitore, non avverrà alcun troncamento (nulla fuoriesce). Guarda il seguente esempio:

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

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

Esempio . Testo su una riga

Tuttavia, ci sono situazioni in cui vogliamo che il testo venga troncato se è troppo lungo (il testo in generale, non le singole parole) e non vada a capo sulla riga successiva. Questo si fa aggiungendo la proprietà white-space con valore nowrap, che vieta l'andata a capo del testo. Guarda l'esempio, ora il testo viene troncato:

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

Esempio . Larghezza in percentuale

Se si imposta la larghezza del blocco in %, anche il troncamento funzionerà correttamente:

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

Vedi anche

le proprietà word-break e overflow-wrap,
che permettono di spostare le lettere di una parola lunga su una nuova riga
la proprietà hyphens,
che abilita la sillabazione
la proprietà overflow,
che tronca le parti che fuoriescono dal bordo del blocco