CSS/JS show only whole words that fit to the container

Question

I've found that article

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

and I'm wondering how to force to display a whole word if it fits to the container:

e.g.

some long sentence

it can be displayed as

some long s...

the word sentence doesn't fit so I want to hide it and show only:

some long

my current css (it adds the ...)

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

Answer 1

You can try this:

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

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