testo in eccesso puntini di sospensione: evitare parola rompere

Question

Nella mia pagina web ho un div con larghezza fissa e utilizzando il seguente CSS:

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

I puntini di sospensione funziona, il problema è che si taglia l'ultima parola, e io voleva che mettesse 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 è il be ... "

Answer 1

Ho paura che sia impossibile. C'era una volta text-overflow: ellipsis-word, che farebbe proprio questo, ma non è stato implementato nei browser ed è stato rimosso dalle bozze di CSS3.

Answer 2

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 scorre ad es. se le dimensioni dello schermo cambiano. Comprende anche il troncamento intelligente dei nomi di percorso, ad es. http://example.com/some/long/.../path.html

---

Essere consapevoli della possibilità di problemi di temporizzazione larghezza-based nei casi in cui i cambiamenti di larghezza o non è più disponibile in modo che il plugin potrebbe non aspettare, come 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 plug-in sembra veloce e robusto.

Answer 3

Ovviamente è possibile. (Se siete disposti a cambiare il tuo markup un po '.)

https://jsfiddle.net/warphLcr/

<style> 
    .foo { 
    /* Make it easy to see where the cutoff point is */ 
    border: 2px solid #999; 

    padding-right: 18px; /* Always have room for an ellipsis */ 
    width: 120px; 
    height: 1.1em; /* Only allow one line of text */ 
    overflow: hidden; /* Hide all the text below that line */ 
    background-color: #fff; /* Background color is required */ 
    } 
    .foo > span { 
    display: inline-block; /* These have to be inline block to wrap correctly */ 
    position: relative; /* Give the ellipsis an anchor point so it's positioned after the word */ 
    background-color: #fff; /* Cover the ellipsis of the previous word with the same background color */ 
    white-space: pre; /* Make sure the only point where wrapping is allowed is after a whole word */ 
    } 
    .foo > span:after { 
    position: absolute; /* Take the ellipsis out of the flow, so the next item will cover it */ 
    content: "…"; /* Each span has an ellipsis */ 
    } 
    .foo > span:last-child:after { 
    content: ""; /* Except for the last one */ 
    } 
</style> 

<div class="foo"> 
    <!-- These *must not* have white space between them, or it will collapse to a space before the next word, and the ellipsis will become visible --> 
    <span>stackoverflow</span><span> is</span><span> the</span><span> best</span> 
</div>