Question

我真的认为jQuery Expander plugin很棒，但却无法满足我的需求。它会剪切文本，并在扩展文本的文本后放置“阅读更多”按钮。但它仅在文本长度超过指定值时才会切断。但是，如果文本是：

Some text:




Blah blah

文本使用的空间与包含许多字符的文本一样多，但Expander不会将其删除。我希望有一个最大行属性，所以我可以限制文本长度和最大行。任何插件建议？

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);
        }
    });
});

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

1 个答案: