Question

我正在尝试实现一个要求，我需要为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) + "&hellip;");
                }
            };

            $(function () {
                $("#title").truncateLineCount(3);
            });
        </script>
    </head>

<body>
 <div id="title">
  My MVC Application<br />
  steaks<br />
  are<br />
  awesome
 </div>
</body>
</html>

是什么给出了？

Answer 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()+"&hellip;");

顺便说一句，我觉得有必要为你的代码添加几个指针：

正如我在评论中提到的，在使用 parseInt（）解析像“12px”这样的字符串时，您不需要剪掉 px 。
不要在循环中使用 var 关键字，这会在每次迭代时重新初始化变量，除了不好的做法之外，还会在ECMAScript 5th的严格模式下抛出错误。
您可以使用 slice（）方法，为第二个参数添加负偏移，而不是使用 substring（）并传递字符串长度-1。
您只需使用document.getElementById(this.attr("id"))，而不是this.get(0)。此已经是jQuery包装的元素，您可以使用 get（）方法访问底层元素。
如果你可以提供帮助，请不要在循环中操纵 html（）/ innerHTML 。由于它在循环的每次迭代中调用HTML解析器，因此性能非常差。

Answer 2

我认为你的截断功能不起作用。

在while循环的每次迭代中，您删除了1个字符，但又添加了8个字符（"…"）。

您可能希望在循环后添加省略号。

Answer 3

this.html(text.substr(0, text.length - 1) + "&hellip;");

此行增加了字数。它删除了最后一个字符，但它添加了"…" 到了终点。所以文本永远不会被截断。

如果你的文字是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()+"&hellip;");

Answer 4

你的$ .fn中你使用它而不是jQuery $（this）..这可能会导致你的while（）语句中出现无限循环。

Answer 5

我认为你以错误的方式使用行高。该属性仅为您提供段落中每一行的高度，它用于测量两行之间的空间，而不是计算段落中的行数。

您从truncateLineCount（）中的内容中删除文本，但lineCount始终具有相同的值，因此while循环永远不会结束...

P.S。注意：truncateLineCount也会删除html（char by char），而不仅仅是text。

jQuery / JavaScript：为什么这会冻结？

5 个答案: