Javascript：根据容器大小将省略号添加到HTML文本

Question

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

这样做的最佳策略是什么？
感谢。

Answer 1

Microsoft开创了一些CSS功能，并且很长一段时间以来，Internet Explorer中的开发人员都可以使用这些功能。其中一个功能是text-overflow属性，is now in CSS3并在Safari和Opera中实现。但是，Firefox仍然不支持此功能。

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

• Ajaxian - Text-Overflow for Firefox via jQuery

---

<强>更新

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

• Javascript Tutorial - How to Auto Ellipse Text
• JavaScript Ellipsis or Cross-Browser "truncate with dots"
• Ajaxian - Ellipsis or "truncate with dots" via JavaScript

Answer 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类，它在所有浏览器中看起来都是最好的。