Javascript 更改线夹样式

我正在为我的网站创建一个推荐页面，其中一些推荐相当长。因此，我想删掉任何超过3行的内容

要阅读其余部分，用户单击按钮，文本展开以显示其余部分

我已经用

线夹

实现了上述功能，但是我希望

..

可以单击并使用不同的文本设置样式。这可能吗

我找不到办法，所以我尝试了一个变通办法。首先，我找出哪些元素溢出，以便插入

[Read More]

。但是，它会插入到文本的末尾，而不是溢出之前

我不知道如何解决这个问题

预期结果：

HTML

<div class="testimonial container-fluid">
    <div class="col-xs-3 rating-container">
        <div>
            <div class="star"></div>
            <div class="star"></div>
            <div class="star"></div>
            <div class="star"></div>
        </div>
    </div>
    <div class="col-xs-9">
        <div class="title">Title</div>
        <div class="content">Lorem ipsum dolor sit amet, vero essent gubergren ad pro, regione epicuri contentiones ea mea. Decore omnium id vim, pro et malis molestie, et porro nostro vis. Ei libris debitis reprehendunt est. Te per delenit scaevola scripserit. Partem erroribus rationibus ea vel, nihil euismod ei vim.

            His sonet antiopam cotidieque ea, eu unum melius conclusionemque his. Ferri iisque sanctus pri ei. Ut ius tantas nonumy intellegam. Et per solum aliquam, melius elaboraret at qui.</div>
        <div class="name_loc" id="demo">Name, London</div>
    </div>
</div>

JS

.testimonial {
    width: 920px;
    display: -webkit-box;
    background-color: #EFEFEF;
    color: #333;
    padding: 8px;
    margin: 0 0 20px;
    border: 3px solid #506790;
}

.testimonial:nth-of-type(even) {
    background-color: #EFEFEF;
}

.testimonial .rating-container {
    height: 144px;
    display: table;
}

.testimonial .rating-container > div {
    display: table-cell;
    vertical-align: middle;
}

.testimonial .star {
    width: 32px;
    height: 32px;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url('http://www.timelinecoverbanner.com/cliparts/wp-content/digital-scrapbooking/lemon-star-md1.png');
    background-size: cover;
}

.testimonial .title {
    font-size: 18pt;
    text-align: left;
    font-weight: bold;
}

.testimonial .content {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    margin: 5px 0 10px;
    font-size: 12pt;
    text-align: left;
    overflow: hidden;
    height: 68px;
}

.testimonial .name_loc {
    font-style: italic;
    font-size: 12pt;
    text-align: right;
}

$('#demo').on('click', function() {
    var t = $(this).closest('.testimonial');
    var c = t.find('.content');         
    var h3 = c[0].scrollHeight;             
    c.animate({'height':h3},500);
});

$('.testimonial').each(function() {
    var c = $(this).find('.content');       
    if (c.height() < c[0].scrollHeight) {
        c.css('text-overflow', 'ellipsis');
        //also tried:
        c.css('line-clamp', '3');
    }
});

$（'demo'）。在（'click'，function（）上{
var t=$（this）.closest（'.commential'）；
var c=t.find（'.content'）；
var h3=c[0]。滚动高度；
c、 设置动画（{'height'：h3}，500）；
});
$（'.commential'）。每个（函数（）{
var c=$（this.find（'.content'）；
如果（c.height（）

您可以使用：：after伪元素完成此操作。我在玩你的小提琴，它似乎起作用了

首先.content类需要相对定位。然后添加两个新的CSS类：

.testimonial .content.collapsed {
/* styles removed from .content */
    overflow: hidden;
    height: 68px;
}
.testimonial .content.collapsed::after {
    display: inline-block;
    content: "...";
    position: absolute;
    bottom: 0;
    right: 5px;
}

您可以将click处理程序添加到JS中的伪元素中（我没有尝试这一部分），然后在单击之后删除“折叠”类。您还可以根据需要设置伪元素的样式，或者将内容更改为“Read more…”或其他任何内容。

尝试修改您的样式。它使用：

$('.testimonial').on( 
    'click', 
    '.content',
    function(e) {
      if (this.scrollHeight > this.offsetHeight) {
          $(this).removeClass('clipped')
                 .addClass('unclipped')
                 .css('height', this.scrollHeight+'px');
      } else {
          $(this).removeClass('unclipped')
                 .addClass('clipped')
                 .css('height', '');
      }
    }
);

还有两个额外的css类：

clipped

和

unclipped

：

.clipped:after {
    position: absolute;
    content: '>';
    top: 2.9em;
    color: red;
    font-weight: bold;
    cursor: pointer;
}

.unclipped:after {
    position: absolute;
    content: '<';
    top: 2.9em;
    color: green;
    font-weight: bold;
    cursor: pointer;
}

.clipped:之后{
位置：绝对位置；
内容：“>”；
顶部：2.9em；
颜色：红色；
字体大小：粗体；
光标：指针；
}
.解开：在{
位置：绝对位置；
内容：“这个呢：

我添加了一个“自述”div，单击它可以显示完整的文本

<div class="name_loc" id="demo">Name, London</div>
    <div class="readmore">Read more</div>


$('.readmore').each(function() {
$(this).click( function() {
    $(this).parent().find('.content').css('height','100%');
    $(this).hide();
});

Name，伦敦
阅读更多
$（'.readmore'）。每个（函数（）{
$（此）。单击（函数（）{
$（this.parent（）.find（'.content'）.css（'height'，'100%）；
$（this.hide（）；
});

}))

希望它能有所帮助
不错，但是如果文本不合适，那么就“多读”没有意义。你只需要检查文本长度并显示/隐藏readme div，这很简单箭头似乎在你的小提琴中消失了。但这是一个很好的解决方案。看起来很有希望，但你能提供一个JSFIDLE吗？我试着按照你说的做了，但一定是做错了什么，因为它不起作用。我从你所拥有的开始：它需要清理一下，但希望您能理解。您不能将click事件绑定到伪元素：很好（我想这就是为什么我遇到一些麻烦的原因）。在我的小提琴中，我将它绑定到了.content