ellissi di overflow del testo: evitare l’interruzione di parole

Nella mia pagina web ho un div con larghezza fissa e usando il seguente css:

width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 

L’ellissi funziona, il problema è che taglia l’ultima parola e volevo che inserisse i puntini di sospensione (…) nel finale di una parola completa.

Per esempio, se ho il testo: “StackOverflow è il migliore”, e se ha bisogno di essere tagliato vicino alla fine, voglio che mostri “StackOverflow è il …” invece di “StackOverflow è l’essere … ”

Ho paura che sia imansible. C’era una volta text-overflow: ellipsis-word , che avrebbe fatto solo questo, ma non è stato implementato nei browser ed è stato rimosso dalle bozze di CSS3.

Certo che è ansible. (Se sei disposto a cambiare leggermente il tuo markup.)

https://jsfiddle.net/warphLcr/

  
stackoverflow is the best

C’è un plugin jQuery che fa questo, chiamato dotdotdot .

Funziona anche per il testo su più righe e si adatta in modo reattivo se il testo riflette, ad esempio, se le dimensioni dello schermo cambiano. Include anche il troncamento intelligente dei nomi di percorso, ad esempio http://example.com/some/long/.../path.html


Siate consapevoli della possibilità di problemi di temporizzazione basati sulla larghezza nei casi in cui la larghezza cambia o diventa non disponibile in modi che il plugin non si aspetta, ad esempio se il testo è inizialmente nascosto o se cambia carattere (ad esempio il caricamento di caratteri Web su alcuni browser) . Potrebbe essere necessario riapplicare o essere applicato dopo tali modifiche.

Ma il 99% delle volte, il plugin sembra veloce e robusto.