Javascript Jquery-按行截断文本（而不是按字符数）

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

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

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

大字标题
这段文字在这里

我能在SOF上找到的最接近的解决方案如下（但它适用于textarea元素，不适用于我）：

谢谢你给我的建议。

---

Ben

如果您使用单间距字体，您将有机会使用这种字体，因为对于一个定义宽度的元素，您将很好地了解每行适合多少个字母。然而，如果一个单词跨行，那么这可能会变得棘手

e：发现了另一个问题，基本上就是你想要的——它们也没有真正的解决方案，但在我看来，线条高度和元素高度似乎最接近

---

为什么不使p元素溢出：隐藏；给定固定的行高，计算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>

p{
溢出：隐藏；
线高：13px；
高度：26px；/*仅显示2行*/
}
函数seeMoreRows（）{
$（p）.高度（“52像素”）；
}

对于基本方法，您可以查看

行高

CSS属性，并在计算中使用该属性。请记住，此方法不会考虑大于该高度的其他内联元素（例如图像）

如果您想要更高级一点的内容，可以使用

getclientracts（）

函数获取关于每一行的信息。此函数返回TextRectangle对象的集合，每个对象具有宽度、高度和偏移量

有关

getClientRects（）

如何工作的示例，请参见此处（尽管这是一个无关的目标）

---

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

几点提示：

• getClientRects返回的集合是静态的，如果包含元素的维度发生更改，它不会自动更新。我的示例通过捕获窗口的调整大小事件来解决这个问题

• 出于我不理解的一些奇怪的标准遵从性原因，调用getClientRects的元素必须是内联元素。在我的示例中，我使用了一个容器div，其中另一个div中的文本位于

  display:inline

  中

---

我编写了这个小小的jQuery代码，允许我逐行截断文本块（通过CSS类），可以随意使用和注释它

这里是，它还包括按字符数或字数截断函数。您可以看到，当前，调整窗口大小不会刷新块显示，我正在处理它

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

/*
*截断x行后的文本块
*
Lorem ipsum magna eiusmod sit labore
*/  
$（“*”）.filter（函数（）{
return/t_truncate_l_/.test（$（this.attr（'class'））；
}).each（函数（{
var el=$（本）；
var content=el.text（）；
var classList=el.attr（'class'）.split（/\s+/）；
$.each（类列表、函数（索引、项）{
如果（/^t\u截断\u l\u/.test（项目））{
var n=子项（13）；
var lineHeight=parseInt（el.css（'line-height'））；
如果（线宽==1 | | el.css（'line-height'）=='normal'）
lineHeight=parseInt（el.css（'font-size'））*1.3；
var maxHeight=n*线宽；
变量截断=$.trim（内容）；
var old；
如果（标高高度（）>最大高度）
截断+='…'；
while（el.height（）>maxHeight&&old！=截断）{
旧=截断；
截断=截断。替换（/\s[^\s]*\.\.\.$/，'…'）；
el.文本（截断）；
}
}
});
});

tl；dr-在容器div上设置一个高度，然后使用

本打算将@Andy E的绝妙示例制作成一个插件，但后来意识到可以实现这一点。我们的用例是，我们希望在桌面上显示一行宽度，在手机/平板电脑上显示两行宽度

---

我们的CSS只会相应地将容器div设置为相当于一到两行的高度，然后dotdot插件就会处理剩下的部分。

我制作了一个小模块，它可以处理纯文本内容，不允许嵌套标签，也不允许在包含文本的元素上添加CSS填充（但是可以轻松添加此功能）

HTML：

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

---

我希望你喜欢

当然，这是前进的方向。我不知道这个，+1看起来像是可以使用的东西，谢谢。不过，不幸的是，我不够聪明，无法将整个脚本放在一起，包括“多/少”链接。有人知道怎么做吗？@Bento:真正的问题是javascript要求先呈现内容，然后再修改。因此，您有一个折衷办法，要么完整呈现内容并在其准备就绪时将其缩小，要么将其隐藏，然后在文档准备就绪时显示所需的数量。这是一个非常笨拙的设计，您最好将这个问题标记为已回答，然后再问另一个问题以获得更好的建议。我不确定所有用于文本截断的Jquery脚本（即之前/之后）是如何处理它的。目前，我正在使用以下脚本，但效果不可见（如果它先呈现HTML，然后截断）：http://plugins.learningjquery.com/expander/ 这项任务可能不会太难，因为有很多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();
        }
    });
}

} )();