CSS/JS mostrare solo le parole intere che si adattano al contenitore

Question

ho trovato che l'articolo

https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/

e mi chiedo come forzare per visualizzare una parola intera se si adatta al contenitore:

ad es.

some long sentence 

può essere visualizzato come

some long s... 

la parola sentence non va bene così voglio nasconderlo e mostrare solo:

some long 

mio css corrente (si aggiunge la ...)

.short { 
    max-width: 250px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

Answer 1

È possibile limitare il testo a un determinato numero di caratteri. Quindi devi trovare l'ultimo indice di un carattere di spazio e limitare nuovamente il testo usando questo indice.

Ecco qualche esempio di codice:

function limitText(text, maxLength) { 
    if (text.length <= maxLength) { 
     return; 
    } 

    text = text.substr(0, maxLength); 

    var lastSpace = text.lastIndexOf(' '); 

    return text.substr(0, lastSpace) + '...'; 
} 

limitText('Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', 20); 

Se si desidera solo a limitare il numero di parole è possibile utilizzare questo codice:

var maxWords = 4; 
var text = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'; 
var newText = text.split(' ').slice(0, maxWords).join(' '); 

Answer 2

Prova questa,

div{ 
white-space: nowrap; 
width: 70px; 
overflow: hidden; 
} 
div > p{ 
white-space: nowrap; 
width: 70px; 
overflow: hidden; 
} 

<div><p>some long sentences</p></div> 
<div>some long sentences</div> 

Answer 3

Semplicemente lascia che il testo trabocchi

.short { 
    max-width: 250px; 
    height: 1em; 
    overflow: hidden; 
    position: relative; 
} 

Answer 4

Si può provare questo:

.element{ 
 
    display: block; 
 
    width: 100px; 
 
    overflow: hidden; 
 
    word-wrap: break-word; 
 
    text-overflow: ellipsis; 
 
    max-height: 16px; 
 
    line-height: 16px; 
 
}

<div class="element">some long string</div>

dove max-height: = line-height: × <number-of-lines>