Question

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

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

我已设法使用line-clamp执行上述操作，但我希望...可点击并使用不同的文字进行样式设置。这可能吗？

我找不到办法，所以我尝试了一种解决方法。首先，我找出哪些元素已溢出，以便可以插入[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>

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伪元素执行此操作。我正在玩你的小提琴，它似乎工作。

首先，.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中的伪元素（我没有尝试此部分），然后在单击后删除“折叠”类。您也可以按照自己想要的方式设置伪元素的样式，或者将内容更改为“Read more ...”或其他任何内容。

Answer 2

尝试摆弄revised JsFiddle。它使用：

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

和2个额外的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;
}

Answer 3

这个怎么样：http://jsfiddle.net/6nb0wwc3/1/

我添加了一个“自述”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();
});

}）;

希望有所帮助

改变线夹式

3 个答案: