html - CSS/JS 只显示适合容器的完整单词

Question

我找到了那篇文章

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

我想知道如何强制显示适合容器的整个单词:

例如

some long sentence

可以显示为

some long s...

单词 sentence 不适合所以我想隐藏它并只显示:

some long

我当前的 css(它添加了 ...)

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

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

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