用以下点隐藏 DIV 中的额外内容答案

【问题标题】：hiding extra contents in DIV with following dots用以下点隐藏 DIV 中的额外内容
【发布时间】：2013-07-19 04:37:43
【问题描述】：

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

输出需求
这是文字这是文字这是文字...

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：