Question

我需要一个Jquery脚本来逐行截断文本（而不是字符数）。

我想实现一个均匀截断的文本块。它应该有一个“更多”和“更少”的链接来扩展和缩短文本段落。我的文本段落包含在一个带有类的div中，如下所示：

<div class="content">
<h2>Headline</h2>
<p>The paragraph Text here</p>
</div>

我可以在SOF上找到的最接近的解决方案是下面的解决方案（但它适用于textarea元素并且对我不起作用）： Limiting number of lines in textarea

非常感谢任何提示。本

Answer 1

对于基本方法，您可以查看line-height CSS属性并在计算中使用它。请记住，此方法不会考虑大于该高度的其他内联元素（例如图像）。

如果您想要更高级的东西，可以使用getClientRects()功能获取有关每一行的信息。此函数返回 TextRectangle 对象的集合，每个对象具有宽度，高度和偏移量。

请参阅此处this answer，了解getClientRects()如何运作的示例（尽管是一个无关的目标）。

<小时/> 更新，有一点时间回来并用一个实际的例子更新这个答案。这是基本的，但你明白了：

http://jsbin.com/ukaqu3/2

有几点指示：

getClientRects 返回的集合是静态的，如果包含元素的尺寸发生变化，它将不会自动更新。我的示例通过捕获窗口的resize事件来解决这个问题。
对于我不理解的一些奇怪的标准兼容性原因，您调用 getClientRects 的元素必须是内联元素。在我的例子中，我使用一个容器div，其中包含另一个div中的文本display: inline。

Answer 2

我制作了这个小jQuery代码，允许我逐行截断文本（通过CSS类），随意使用和评论它。

以下是jsFiddle ，其中还包括按字数或字数统计的截断函数。你可以看到，目前，调整窗口大小不会刷新块显示，我正在研究它。

/*
*   Truncate a text bloc after x lines
*   <p class="t_truncate_l_2">Lorem ipsum magna eiusmod sit labore.</p>
*/  
$("*").filter(function () { 
    return /t_truncate_l_/.test($(this).attr('class')); 
}).each(function() {
    var el = $(this);
    var content = el.text();
    var classList = el.attr('class').split(/\s+/);
    $.each(classList, function(index, item){
        if(/^t_truncate_l_/.test(item)) {
            var n = item.substr(13);
            var lineHeight = parseInt(el.css('line-height'));
            if(lineHeight == 1 || el.css('line-height') == 'normal')
                lineHeight = parseInt(el.css('font-size')) * 1.3;
            var maxHeight = n * lineHeight;
            var truncated = $.trim(content);
            var old; 
            if(el.height() > maxHeight)
                truncated += '...';
            while(el.height() > maxHeight && old != truncated) {
                old = truncated;
                truncated = truncated.replace(/\s[^\s]*\.\.\.$/, '...'); 
                el.text(truncated);
            }
        }
    });
});

Answer 3

为什么不用溢出来创建p元素：hidden;给出固定的行高，计算div的高度，这样id就包含你需要的行数，并且只能从javascript改变p的高度。

p{
    overflow:hidden;
    line-height:13px;
    height:26px; /* show only 2 rows */
}
<script type="text/javascript">
    function seeMoreRows(){
        $(p).height("52px");
    }
</script>

Answer 4

我创建了一个小文件，它使用纯文本内容，没有嵌套标签，并且允许在含文本元素上使用css-padding（但可以轻松添加此功能）。

HTML：

<p class="ellipsis" data-ellipsis-max-line-count="3">
    Put some multiline text here
</p>

Javascript / Jquery：

( function() {

$(document).ready(function(){
    store_contents();
    lazy_update(1000);
});

// Lazy update saves performance for other tasks...
var lazy_update = function(delay) {

    window.lazy_update_timeout = setTimeout(function(){

        update_ellipsis();

        $(window).one('resize', function() {
            lazy_update(delay);
        });

    }, delay);
}

var store_contents = function(){

    $('.ellipsis').each(function(){
        var p = $(this);
        p.data('ellipsis-storage', p.html());
    });
}

var update_ellipsis = function(){

    $('.ellipsis').each(function(){

        var p = $(this);
        var max_line_count = p.data('ellipsis-max-line-count');
        var line_height = p.html('&nbsp').outerHeight();
        var max_height = max_line_count*line_height;
        p.html(p.data('ellipsis-storage'));
        var p_height = p.outerHeight();

        while(p_height > max_height){

            var content_arr = p.html().split(' ');
            content_arr.pop();
            content_arr.pop();
            content_arr.push('...');
            p.html(content_arr.join(' '));
            p_height = p.outerHeight();
        }
    });
}

} )();

我希望你喜欢它！

Answer 5

如果您使用的是等宽字体，那么您可以轻松完成这项工作，因为您可以很好地了解每行上有多少个字母，以获得定义宽度的元素。但是，如果一个单词在行间断开，那么这可能会变得棘手......

e：发现了另一个基本上你正在追求的问题 - 它们也没有真正的分辨率，但在我看来，线高和元素高度似乎最接近。

"How can I count text lines inside a dom element"

Answer 6

tl; dr - 在容器div上设置高度，然后使用jQuery dotdotdot plugin

即将把@Andy E的一个很棒的例子变成一个插件，但后来意识到https://github.com/BeSite/jQuery.dotdotdot可能会把它拉下来。我们的用例是我们想要在桌面宽度上显示一行，在移动设备/平板电脑上显示两行。

我们的CSS只是将容器div设置为相当于一个或两个行高，然后dotdotdot插件似乎可以处理其余部分。

Jquery - 逐行截断文本（不是字符数）

6 个答案: