CSS: come funziona la proprietà text-overflow

I CSS3 ora ci consentono di troncare il testo in eccesso aggiungendo puntini di sospensione. Tuttavia la proprietà text-overflow funziona solo se combinata con altre proprietà.

Per troncare il testo occorre che l'elemento abbia una larghezza dichiarata e la proprietà white-space impostata su nowrap. Questo valore fa si che lo spazio bianco venga riunito. In questo modo il testo resterà sulla stessa riga fino a quando non verrà inserito un ritorno a capo tramite l'elemento br.

.ellipsis {
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

Affinchè questa tecnica funzioni è necessario che l'elemento a cui viene applicata abbia un genitore che lo contenga tramite il suo blocco contenitore. In caso contrario i puntini di sospensione non compariranno ed il testo verrà mostrato nella sua interezza.