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

时间:2010-02-10 09:54:36

标签: javascript html mootools

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

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

2 个答案:

答案 0 :(得分:2)

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

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


<强>更新

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

答案 1 :(得分:-1)

您需要定义要显示的文本中的字符数。然后使用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类,它在所有浏览器中看起来都是最好的。