Troncatura dei ellissi CSS quando la larghezza è più stretta del carattere ellittico

Question

Uso il seguente CSS per troncare il testo con ellissi.

.truncate { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

Questo metodo funziona bene per me, ma non si comporta come vorrei quando la larghezza dell'elemento è inferiore alla larghezza del carattere puntini di sospensione. Mi aspetto che il carattere di ellissi venga troncato, ma invece il testo originale viene troncato senza i puntini di sospensione.

Vedere this JSFiddle per un esempio.

Mentre posso evitare questo problema con una larghezza minima, sono curioso di scoprire se c'è un modo semplice per mostrare un carattere di ellisse troncato invece del testo troncato.

Answer 1

Ho la stessa domanda con te, c'è una soglia di larghezza per il carattere di ellisse troncato che cambia in testo ellittico troncato, e la soglia di larghezza è influenzata dalla dimensione del carattere, ed è diversa dal tipo di browser. se conosciamo la soglia di larghezza, possiamo usare manualmente '...' per sostituire il testo originale. tuttavia, la soglia della larghezza non è nota ...