用下面的点隐藏DIV中的额外内容

hiding extra contents in DIV with following dots

本文关键字：DIV 额外内容 隐藏      更新时间：2023-09-26

我需要在点（…）后面的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的其余内容
但我想如果它必须隐藏，那么三个点...应该放在最后，否则就不是

输出需求
这是文本这是文本。。。

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

http://jsfiddle.net/FXHA3/

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

您要查找的是省略号

以下是它的使用示例：

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

您可以使用一个简单的javascript，尤其是当您使用jQuery:时

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

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

相关文章：