javascript - 更改线夹样式

Question

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

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

我已经设法用 line-clamp 完成了上述操作，但是我想让 ... 可以点击并使用不同的文本设置样式。这可能吗？

我找不到这样做的方法，所以我尝试了一种解决方法。首先，我找出哪些元素溢出，以便可以插入 [Read More]。但是它被插入到文本的末尾，而不是在溢出之前。

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

期望的结果:

Current result (jsfiddle)

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>

CSS

.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;
}

JS

$('#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');
    }
});

Answer 1

您可以使用::after 伪元素来做到这一点。我在玩你的 fiddle ，它似乎奏效了。

首先，.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;
}

您可以在 JS 中将点击处理程序添加到伪元素(我没有尝试这部分)，然后在点击后删除“折叠”类。您还可以根据需要设置伪元素的样式，或将内容更改为“阅读更多...”或其他内容。