使用以下点在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的其余内容
但我希望如果它必须隐藏，那么应该在最后放置三个点...而不是

输出需求
这是文本，这是文本，这是...

Answer 1

以下是使用text-overflow:ellipsis的可能解决方案：

http://jsfiddle.net/FXHA3/

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

Answer 2

您要找的是省略号

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

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow

Answer 3

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

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

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