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

我有一段大约10行。 我想在两行之后显示“阅读更多”按钮

如何使用jQuery获取某些字符的前两行

有没有类似的功能

---

$（'p'）.get（2行）
AFAIK JavaScript中没有类似的代码

可以设置p标记的高度，然后将溢出设置为隐藏。当您单击“阅读更多”按钮时，您可以将p标记扩展到原始内容高度

但问题是，您必须提前预测两行文本的高度，然后将p标记显示到该高度；可能需要定制

<script language="javascript">

    $.fn.truncate = function(options) {

        var defaults = {
            length: 300,
            minTrail: 20,
            moreText: "more",
            lessText: "less",
            ellipsisText: "..."
        };

        var options = $.extend(defaults, options);

        return this.each(function() {
            obj = $(this);
            alert(options.minTrail);
            var body = obj.html();
            if (body.length > options.length + options.minTrail) {
                var splitLocation = body.indexOf(' ', options.length);
                if (splitLocation != -1) {
                    // truncate tip
                    var splitLocation = body.indexOf(' ', options.length);
                    var str1 = body.substring(0, splitLocation);
                    var str2 = body.substring(splitLocation, body.length - 1);
                    obj.html(str1 + '<span class="truncate_ellipsis">' + options.ellipsisText +
                        '</span>' + '<span  class="truncate_more">' + str2 + '</span>');
                    obj.find('.truncate_more').css("display", "none");
                    // insert more link
                    obj.append(
                        '<div class="clearboth">' +
                        '<a href="#" class="truncate_more_link">' + options.moreText + '</a>' +
                        '</div>'
                    );
                    var moreLink = $('.truncate_more_link', obj);
                    var moreContent = $('.truncate_more', obj);
                    var ellipsis = $('.truncate_ellipsis', obj);
                    moreLink.click(function() {
                        if (moreLink.text() == options.moreText) {
                            moreContent.show('normal');
                            moreLink.text(options.lessText);
                            ellipsis.css("display", "none");
                        } else {
                            moreContent.hide('normal');
                            moreLink.text(options.moreText);
                            ellipsis.css("display", "inline");
                        }
                        return false;
                    });
                }
            }
        });
    };

    $().ready(function() {  
        $('.tip').truncate( {  
            length: 120,  
            minTrail: 10,  
            moreText: 'show more',  
            lessText: 'show less'  
        });  
    }); 
</script>

<div class="tip" style="width:200px;background-color:#ccc;padding:10px;">  
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fringilla, purus a ultrices blandit, odio ante scelerisque neque, vitae imperdiet odio velit ac nisl. Sed tortor metus, placerat condimentum, feugiat in, feugiat adipiscing, mi. Donec pulvinar sem vitae leo. Vestibulum eget lectus et ligula hendrerit pharetra. Sed porta justo ac nisl. Aliquam nisi erat, pellentesque sed, sagittis eu, fringilla sit amet, dolor. Nam ac mi. Pellentesque pede purus, mattis aliquet, semper nec, cursus a, orci. Duis bibendum nibh ac massa. Integer eu tortor. Aenean convallis quam at nunc. Nunc mollis tincidunt nisi. Suspendisse mauris odio, iaculis ut, feugiat vitae, ultrices in, tortor. Quisque at elit. In hac habitasse platea dictumst.  
</div>  


$.fn.truncate=函数（选项）{
var默认值={
长度：300，
minTrail:20，
moreText:“更多”，
lessText：“更少”，
ellipsisText:“…”
};
var options=$.extend（默认值，选项）；
返回此值。每个（函数（）{
obj=$（本）；
警报（options.minTrail）；
var body=obj.html（）；
if（body.length>options.length+options.minTrail）{
var splitLocation=body.indexOf（“”，options.length）；
如果（拆分位置！=-1）{
//截尖
var splitLocation=body.indexOf（“”，options.length）；
var str1=body.substring（0，splitLocation）；
var str2=body.substring（splitLocation，body.length-1）；
html（str1+''+options.ellipsisText+
“+”+str2+”；
obj.find（'.truncate_more'）.css（“显示”、“无”）；
//插入更多链接
对象附加(
'' +
'' +
''
);
var moreLink=$（'.truncate_more_link'，obj）；
var moreContent=$（'.truncate_more'，obj）；
变量省略号=$（'.truncate_省略号'，obj）；
moreLink.click（函数（）{
if（moreLink.text（）==options.moreText）{
moreContent.show（“正常”）；
text（options.lessText）；
css（“显示”、“无”）；
}否则{
moreContent.hide（'normal'）；
text（options.moreText）；
css（“显示”、“内联”）；
}
返回false；
});
}
}
});
};
$（）.ready（函数（）{
$（'.tip'）。截断（{
长度：120，
minTrail:10，
moreText:'显示更多'，
lessText:“少展示”
});  
}); 
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃蒂亚姆·弗里利亚、普卢斯·奥特莱斯·布兰迪特、奥迪奥·安特·塞莱里克·内克、奥迪奥·维利特·维利特·奥迪奥·维利特·瓦利特·尼塞尔。塞德·托托·梅特斯，普莱斯特拉特调味品，费吉亚，费吉亚·阿迪皮斯，密苏里州。Donec pulvinar sem vitae leo。前庭，前庭，前庭，前庭。这是我的家。Aliquam nisi erat、Pelletsque sed、sagittis eu、fringilla sit amet、dolor。南亚美。佩伦茨克佩德珀鲁斯，马蒂斯阿利奎特，森佩尔nec，库苏斯a，奥奇。我是比班杜姆·尼伯·阿卡·马萨。整数欧盟侵权人。阿尼安·康瓦利斯·夸姆在努克。尼西莫利斯酒店。莫里斯·奥迪奥、艾库利斯·尤特、维塔伊家族、奥特莱斯家族、托托家族。精英队的奎斯克。在hac habitasse Plateum，一句名言。
我认为格里格的答案很棒！所以我并不是想通过发布这个来最小化它，但是正如phoenix和Funka所建议的，您可以调整高度并隐藏溢出（但不要使用像素，使用em）。这是一个非常基本的示例。。单击框以展开或收缩它

<style type="text/css">
.info {
 width: 300px;
 background-color: #222;
 padding: 5px;
}
</style>

<div class="info">  
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. Nulla facilisi. Integer tincidunt aliquam rhoncus. Donec nec sagittis mi. Donec et tortor eu diam placerat tempor auctor ac ipsum. Morbi nec nisl felis. Maecenas imperdiet velit nec metus placerat semper rutrum ante iaculis. Cras viverra volutpat enim, in scelerisque sem lobortis sit amet. Donec ornare ante nisl. 
</div>

<script type="text/javascript">
$(document).ready(function(){
 var rowsshown = 2;
 var rowheight = 1.2; // line height in 'em'
 var ht = (rowsshown * rowheight) - .5; // subtracting the .5 prevents the top of the next line from showing
 $('.info')
  .css({'overflow':'hidden','line-height' : rowheight + 'em','height': ht + 'em' })
  .click(function(){
   if ( $(this).css('height') == 'auto') {
    $(this).css('height', ht + 'em');
   } else {
    $(this).css('height','auto');
   }
  });
})
</script>


.info{
宽度：300px；
背景色：#222；
填充物：5px；
}
Lorem ipsum dolor sit amet，是一位杰出的献身者。Nam ornare cursus elementum。Mauris和sem在非orci车辆上的生命。在tortor lacus，车辆id位于nec，pharetra非nunc。这是一个不平等的事实。前庭是一个发酵的地方。潜力悬钩子。Nam scelerisque sodales porttitor。前庭前庭大前庭，前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。毛里斯。佩伦茨克ultrices pharetra diam。把一个电灯泡关上。埃尼安·欧迪奥·多洛。莫里斯·奥古斯·利奥，弗林蒂利亚·欧萨吉蒂，酒后发酵。梅塞纳斯权杖位于埃拉特·波苏尔·维塔·梅特斯临时住所。在我面前的维瓦摩斯是一位伟大的艺术家。提供车辆精英。埃尼安·维韦拉·努克。无便利。整尾金鱼。不，我是萨吉蒂。Donec et tortor eu diam placerat tempor auctor ac ipsum。摩比猫。这是一种新的治疗方法。克拉斯·维韦拉·奥瓦帕特·埃尼姆（Cras viverra Volatit enim）在《权杖》（scelerisque sem lobortis）中坐着阿梅特。Donec ornare ante nisl。
$（文档）.ready（函数（）{
var rowsshown=2；
var rowheight=1.2；//em中的行高度
var ht=（rowsshown*rowheight）-.5；//减去.5将阻止显示下一行的顶部
$（“.info”）
.css（{'overflow'：'hidden'，'line-height'：rowheight+'em'，'height'：ht+'em'}）
。单击（函数（）{
if（$（this.css（'height'）=='auto'）{
$（this.css（'height'，ht+'em'）；
}否则{
$（this.css（'height'，'auto'）；
}
});
})
如果您的字体大小和行距定义明确且众所周知，这不是一个真正严重的问题吗？使用像素使这变得容易。就这个答案而言，我对这个解决方案的想法也是一样的。固定p标签的高度，隐藏溢出，然后放置“读取更多”按钮