CSS/JS показывают только целые слова, которые соответствуют контейнеру

Я нашел эту статью

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

и мне интересно, как заставить отображать целое слово, если оно подходит к контейнеру:

например.

some long sentence

он может отображаться как

some long s...

слово sentence не подходит, поэтому я хочу скрыть его и показать только:

some long

my current css (добавляет ...)

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

Ответ 1

Вы можете попробовать следующее:

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

Ответ 2

Вы можете ограничить текст определенным количеством символов. Затем вам нужно найти последний индекс символа пробела и снова ограничить текст, используя этот индекс.

Вот пример кода:

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

Если вы хотите ограничить количество слов, вы можете использовать этот код:

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

Ответ 3

Попробуйте это,

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>

Ответ 4

Просто перелейте текст

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