更改行数限制样式

Question

更改行数限制样式

javascriptjqueryhtmlcss

3

我正在为我的网站创建一个感言页面，其中一些感言非常长。因此，我想剪掉超过3行的内容。

为了阅读其余部分，用户点击按钮，文本就会展开显示其余部分。

我已经使用line-clamp实现了上述功能，但我希望有"..."可点击并使用不同的样式进行设计。这可能吗？

我找不到方法来实现这一点，因此我尝试了一个解决办法。首先，我找出哪些元素具有溢出，以便可以插入"[Read More]"。但是它被插入到文本的末尾，而不是在溢出之前。

我对如何解决这个问题一筹莫展。

期望结果：

当前结果(jsfiddle): http://jsfiddle.net/6nb0wwc3/ 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');
    }
});

- Chris

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dave 5000 · 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中给伪元素添加点击处理程序（我没有尝试过这部分），然后在点击后移除"collapsed"类。你也可以根据自己的需要对伪元素进行样式化，或者将内容更改为"阅读更多..."或其他任何内容。

- KooiInc · Answer 2

尝试调整一下你的修订版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', '');
      }
    }
);

还有两个额外的 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;
}

- Ricardo Pontual · Answer 3

这是什么情况：http://jsfiddle.net/6nb0wwc3/1/

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

});

希望能有所帮助