Hide text after 2 lines

Question

I have a snippet of code that hides text after 1 line. Is there a way of modifying this so it hides after 2 lines? It needs to responsive so setting a fixed height or width isn't an option.

Fiddle 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');
});

Looks like this is what you need: http://stackoverflow.com/questions/15909489/text-overflow-ellipsis-on-two-lines — itdoesntwork, Apr 18 '16 at 08:00
remove "white-space" property and give some "height" to your "#my_text". But it will not show the truncated dots. — Atula, Apr 18 '16 at 08:45
@Atula Thanks but setting a height isn't an option as I need a responsive solution, which is what makes this a little more complex. If I was able to set a height it would be very simple to implement. — , Apr 18 '16 at 08:48

score 0 · Accepted Answer · answered Apr 18 '16 at 09:24

Set the height of the div by calculating the amount of lines. This can be done by, for example, div height = (line-height * 2)

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

var style = $('<style>.ellipsis { height: '+((parseInt($('.ellipsis').css('line-height')) * 2)+'px')+' }</style>');
$('html > head').append(style);

you will notice I have added the CSS as a rule as opposed to adding it to the element itself.

Hide text after 2 lines

1 Answers1