CSS/JS pokazać tylko całe słowa, które pasują do pojemnika

Question

Znalazłem ten artykuł

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

i zastanawiam się, jak zmusić, aby wyświetlić całe słowo, czy pasuje do kontenera:

np.

some long sentence 

może być wyświetlany jako

some long s... 

słowo sentence nie pasuje więc chcę go ukryć i pokazać tylko:

some long 

mój obecny css (to dodaje ...)

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

Answer 1

Możesz ograniczyć tekst do pewnej liczby znaków. Następnie musisz znaleźć ostatni indeks spacji i ograniczyć tekst ponownie za pomocą tego indeksu.

Oto niektóre przykładowy kod:

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); 

Jeśli tylko chcesz ograniczyć liczbę słów można użyć tego kodu:

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

Answer 2

spróbować tego,

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

Simply przepełnienie tekstu:

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

Answer 4

Można spróbować to:

.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>

gdzie max-height: = line-height: x <number-of-lines>