Question

我找到了那篇文章

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

我想知道如果它适合容器，如何强制显示整个单词：

e.g。

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>

Answer 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(' ');

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

Answer 4

只需让文字溢出

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

CSS / JS只显示适合容器的整个单词

4 个答案: