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

Question

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

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

Answer 1

微软开创了一些CSS功能，并且现在已经在Internet Explorer中为开发人员提供了很多CSS功能。其中一个功能是text-overflow属性，其中is now in CSS3并在Safari和Opera中具有实现。但是，Firefox仍然不支持这个功能。

对于一个跨浏览器的JavaScript实现的jQuery框架省略号功能的，你可能有兴趣在检查出的以下文章：

• Ajaxian - Text-Overflow for Firefox via jQuery

---

UPDATE：

由于jQuery不是o ption，您可能需要检查以下内容：

• 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类，看起来最好在所有浏览器。