javascript - 用以下点隐藏 DIV 中的额外内容

Question

我需要从我的 DIV 元素中隐藏额外的文本（...）

我在用着

<div style="width:200px; height:2em; line-height:2em; overflow:hidden;" id="box">
 this is text this is text this is text this is text
</div>

结果
它隐藏了溢出 DIV 的其余内容，
但我希望如果它必须隐藏，...则应在末尾放置三个点，否则不

输出需要
这是文本这是文本这是文本...

score 3 · Accepted Answer

这是一个可能的解决方案text-overflow:ellipsis：

.ellipsis {
    width:200px;
    height:2em;
    line-height:2em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

score 2 · Accepted Answer

您要查找的内容称为省略号

下面是一个如何使用它的例子：

score 0 · Accepted Answer

您可以为此使用简单的 javascript，尤其是在使用 jQuery 时：

jQuery('#box').html(jQuery('#box').html().substr(0,30) + '...');

这将显示前 30 个字符和 3 个点

3 回答 3