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

9  

You can try this:

你可以试试这个:

.element{
    display: block;
    width: 100px;
    overflow: hidden;
    word-wrap: break-word;
    text-overflow: ellipsis;
    max-height: 16px;
    line-height: 16px;
}

some long string

where max-height: = line-height: ×

其中max-height:= line-height:× <行数>

0  

Simply let the text overflow

只需让文字溢出

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

0  

You can limit the text to a certain amount of characters. Then you have to find the last index of a space character and limit the text again using this index.

您可以将文本限制为一定数量的字符。然后,您必须找到空格字符的最后一个索引,并使用此索引再次限制文本。

Here's some example code:

这是一些示例代码:

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

If you only want to limit the number of words you can use this code:

如果您只想限制单词数,可以使用此代码:

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

0  

Try this,

div{
white-space: nowrap;
width: 70px;
overflow: hidden;
}
div > p{
white-space: nowrap;
width: 70px;
overflow: hidden;
}

some long sentences
some long sentences