Javascript：根据容器大小向 HTML 文本添加省略号答案

【问题标题】：Javascript: Adding ellipsis to HTML text according to container sizeJavascript：根据容器大小向 HTML 文本添加省略号
【发布时间】：2010-02-10 09:54:35
【问题描述】：

我有一个包含文本的 div。文本应缩短为两行，并在末尾添加“...”以指出还有更多内容。
由于字体和字体大小可能会根据不同用户的设置（例如：浏览器“文本大小”设置、不同浏览器等）而有所不同，因此我需要在客户端动态执行此操作。

最好的策略是什么？
谢谢。

【问题讨论】：

标签： javascript html mootools

【解决方案1】：

有一些 CSS 功能是 Microsoft 开创的，并且长期以来一直可供 Internet Explorer 中的开发人员使用。其中一项功能是text-overflow 属性，它是is now in CSS3，并在Safari 和Opera 中实现。但是，Firefox 仍然不支持此功能。

对于 jQuery 框架的省略号功能的跨浏览器 JavaScript 实现，您可能有兴趣查看以下文章：

Ajaxian - Text-Overflow for Firefox via jQuery

更新：

由于 jQuery 不是一个选项，您可能需要检查以下内容：

【讨论】：

谢谢，但是如果不是跨浏览器我就不能用了，而且我们不用jQuery。

【解决方案2】：

您需要定义要显示的文本中的字符数。然后使用 for 循环遍历文本，直到达到您定义的字符数，同时将您已经通过的字符保存到字符串变量中。一旦达到定义的字符数，for 循环就会结束，并将字符串“...”附加到构建字符串变量中。这是容器的新文本。这是一些代码：

nchars = 50;
div = document.getElementById("your_div_with_text");
divText = div.innerHTML;
newDivText = "";
for(var i = 0; i < nchars; i++){
   newDivText += divText[i];
}
newDivText += "...";
div.innerHTML = newDivText;

至于字体和字体大小的问题，您可能只需设置一个包含字体大小和字体系列的 CSS 类，它在所有浏览器中看起来都是最好的。

【讨论】：

从纯粹基于印刷的角度来看，字符串“...”不等同于省略号字符（… 或 …）请考虑使用其中之一而不是“.. ." ;)
不要对innerHTML 属性执行此操作。您最终可能会从生成的 HTML 中删除结束标记，这可能会导致严重的问题。
谢谢，但这不是我要找的。我无法指定字符数，它必须是动态的。