我正在尝试实现一个要求,我需要为div元素的内容设置最大行长度。但是当我在Firefox中打开页面时,我收到有关“长时间运行的脚本”的错误,并被要求继续,调试或停止脚本。我不明白为什么会这样。这是我的代码:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$.fn.lineCount = function () {
var lineHeight = this.css("line-height"); // returns "Xpx"
return document.getElementById(this.attr("id")).offsetHeight / parseInt(lineHeight.substr(0, lineHeight.length - 2));
};
$.fn.truncateLineCount = function (countAfterTruncation) {
while (this.lineCount() > countAfterTruncation) {
var text = this.html();
this.html(text.substr(0, text.length - 1) + "…");
}
};
$(function () {
$("#title").truncateLineCount(3);
});
</script>
</head>
<body>
<div id="title">
My MVC Application<br />
steaks<br />
are<br />
awesome
</div>
</body>
</html>
是什么给出了?
答案 0 :(得分:1)
line-height CSS属性的默认值为 normal 。这一行:
var lineHeight = this.css("line-height"); // returns "Xpx"
实际上是返回"normal"
,然后您的代码会尝试将其解析为整数,从而产生NaN
。
http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
除此之外,正如其他人所提到的那样,你的循环会移除1个字符并添加另外8个字符,因此它永远不会变短。你应该在循环结束后附加…
并且你的行足够短:
while (this.lineCount() > countAfterTruncation) {
this.html(this.html().slice(0, -1));
}
this.html(this.html()+"…");
顺便说一句,我觉得有必要为你的代码添加几个指针:
document.getElementById(this.attr("id"))
,而不是this.get(0)
。 此已经是jQuery包装的元素,您可以使用 get()方法访问底层元素。答案 1 :(得分:1)
我认为你的截断功能不起作用。
在while循环的每次迭代中,您删除了1个字符,但又添加了8个字符("…"
)。
您可能希望在循环后添加省略号。
答案 2 :(得分:1)
this.html(text.substr(0, text.length - 1) + "…");
此行增加了字数。它删除了最后一个字符,但它添加了"…"
到了终点。所以文本永远不会被截断。
如果你的文字是My MVC Application
,经过一段时间的循环后,它会变成:
My MVC Applicatio................
你的循环应该是:
while (this.lineCount() > countAfterTruncation) {
var text = this.html();
this.html(text.substr(0, text.length - 1));
}
this.html(this.html()+"…");
答案 3 :(得分:0)
你的$ .fn中你使用它而不是jQuery $(this)..这可能会导致你的while()语句中出现无限循环。
答案 4 :(得分:0)
我认为你以错误的方式使用行高。该属性仅为您提供段落中每一行的高度,它用于测量两行之间的空间,而不是计算段落中的行数。
您从truncateLineCount()中的内容中删除文本,但lineCount始终具有相同的值,因此while循环永远不会结束...
P.S。 注意:truncateLineCount也会删除html(char by char),而不仅仅是text。