jquery - 具有 max-lines 属性的 jQuery 扩展器

Question

我真的认为jQuery Expander 插件很棒，但它不能满足我的需求。它剪切文本并在扩展文本的文本后放置一个“阅读更多”按钮。但它仅在文本长度大于指定值时才会剪切。但是如果文本是：

Some text:




Blah blah

文本使用与包含许多字符的文本一样多的空间，但扩展器不会将其截断。我想要一个最大行数属性，这样我就可以限制文本长度和最大行数。有什么插件建议吗？

Answer 1

我已经构建了这个 jQuery，它部分取自 fudgey 的链接。不幸的是，它使用 px 而不是 em，因为我需要将 div 的高度与 .height() 进行比较。使它成为一个函数也可能更漂亮，但它可以工作:)

$(document).ready(function () {
    var maxlines = 12;
    var lineheight = 15; // line height in 'px'
    var maxheight = (maxlines * lineheight);
    var allowedExtraLines = 3;
    var showText = "Læs mere...";
    var hideText = "Skjul tekst...";

    $('.Truncate').each(function () {
        var text = $(this);
        if (text.height() > maxheight + allowedExtraLines * lineheight) {
            text.css({ 'overflow': 'hidden', 'line-height': lineheight + 'px', 'height': maxheight + 'px' });

            var link = $('<a href="#">' + showText + '</a>');
            link.click(function (event) {
                event.preventDefault();

                if (text.css('height') == 'auto') {
                    $(this).html(showText);
                    text.css('height', maxheight + 'px');
                } else {
                    //$(this).remove();
                    $(this).html(hideText);
                    text.css('height', 'auto');
                }
            });

            var linkDiv = $('<div></div>');
            linkDiv.append(link);

            $(this).after(linkDiv);
        }
    });
});