隐藏2行后的文字

时间:2016-04-18 07:56:03

标签: jquery css

我有一段代码隐藏了一行后的文字。有没有办法修改它,所以它隐藏在2行之后?它需要响应,因此设置固定的高度或宽度不是一个选项。

小提琴http://jsfiddle.net/AlienWebguy/9t3Z5/3/

HTML

<div id="my_text" class="ellipsis">
      Lorem ipsum dolor // lots more text
</div>

CSS

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

#my_text {
    font-family:arial;
    color:#333;
    font-size:10px;
    width:80%;
}

的jQuery

$('#read_more').click(function(){
    $('#my_text').toggleClass('ellipsis');
});

1 个答案:

答案 0 :(得分:0)

通过计算线数来设置div的高度。这可以通过例如div height =(line-height * 2)

来完成

DEMO http://jsfiddle.net/9t3Z5/465/

@SpringBootApplication

您会注意到我已经添加了CSS作为规则,而不是将其添加到元素本身。