0

我检查了以下链接

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

如何使用 jQuery 从 <p> 获取前 2 行或 200 个字符

但在这些中，如果您的 div 包含不同字体大小的标题和文本，则无法预测行高

例如。

<div class='info'>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare cursus elementum.
Mauris et sem vitae dui vehicula lobortis a non orci. In tortor lacus, 
vehicula id placerat nec, pharetra non nunc. Aliquam id ipsum quis orci 
posuere pellentesque et vel urna. Vestibulum mattis sem ornare neque fermentum vel 
imperdiet nunc eleifend. Suspendisse potenti. Nam scelerisque sodales porttitor. Vestibulum cursus 
lobortis magna, id vehicula justo faucibus iaculis. Proin facilisis facilisis mauris. Pellentesque ultrices 
pharetra diam. Fusce a eleifend quam. Aenean eu odio dolor. Mauris augue leo, fringilla eu sagittis at, fermentum 
vitae dui. Maecenas scelerisque mi at erat posuere vitae porta metus tempor. Vivamus at ante id velit rutrum 
aliquet eget sit amet purus. Proin sed vehicula elit. Aenean a viverra nunc.</p>

4

1 回答 1

3

我已经处理了您发布的两个链接中的一些代码。下面的 JSfiddle 将向您展示它是如何工作的以及所需的 html 和 css 是什么。我建议只使用 .class 截断段落。这个答案将考虑不同的字体大小。

http://jsfiddle.net/Pjgzq/1/

基本上，一旦你在 js fiddle 中添加了 jquery 函数，你需要调用

$('.class').truncate();

可以传递与函数中的“默认”选项匹配的选项。

这是功能。

$.fn.truncate = function(options) {
    $(this).append('<span class="truncate_lh" style="display:none;">&nbsp;</span>')

    var defaults = {
        maxlines: 2,
        moreText: 'More',
        lessText: 'Less',
        ellipsis: '...'
    };

    $.extend(options, {
        lineheight: ($('.truncate_lh').css('height').replace('px', ''))
    });
    $.extend(options, {
        maxheight: (options.maxlines * options.lineheight)
    });
    options = $.extend(defaults, options);

    return this.each(function() {
        var text = $(this);

        if (text.height() > options.maxheight) {

            text.css({
                'overflow': 'hidden',
                'height': options.maxheight + 'px'
            });

            var link = $('<a href="#" class="showHide">' + options.moreText + '</a>');
            var wrapDiv = $('<div class="truncate_wrap" />');

            text.wrap(wrapDiv);
            text.after(link);

            link.click(function() {
                if (link.text() == options.moreText) {
                    link.text(options.lessText);
                    text.css('height', 'auto');
                } else {
                    link.text(options.moreText);
                    text.css('height', options.maxheight + 'px');
                }
                return false;
            });
        }
    });
};
于 2013-04-30T09:08:39.020 回答