How To Add Ellipsis After Two Lines?

Can we add an ellipsis after two lines of text? I am able to add ellipsis in one line, but if the text is large I want it to display the text on two lines. If the text is even bigg

Solution 1:

Following these references,

1. Window.getComputedStyle(...)
2. Element.clientHeight instead of this Element.getBoundingClientRect()
3. line-height
4. box-sizing
5. text-overflow (please, check browser support)

The solution

I provide this method, given that you element have only flat text (I means nothing to challenge our calculations)

<style>div/** dont' fail to note that I've remove the white-space property **/
    {
        border: 1px black dotted; /** just to see the borders **/box-sizing: content-box; /** this is very important, see the doc OR you will have to fetch and convert the padding-top and padding-bottom in your `new height` calculations **/text-overflow: ellipsis;
        overflow: hidden;
        width: 220px;
    }
</style><div>
    Mollit sint adipisicing ipsum mollit duis dolor consectetur ullamco magna esse.
    Tempor voluptate qui pariatur anim occaecat sunt laborum sunt dolore id.
    Aliquip excepteur aute nulla duis eu cillum.
    Lorem ad aute aliquip cillum.
    Lorem ea dolore laboris pariatur adipisicing duis eiusmod labore elit Lorem incididunt consectetur consequat.
</div><script>
    +function()
    {
        'use strict';
        var element = document.querySelector('div');
        var style = element.ownerDocument.defaultView.getComputedStyle(element); // Why using `element.ownerDocument.defaultView` because the element may come from a different window, like iframevar lineHeight = parseInt(style.lineHeight.replace(/[a-z]+$/)); // I could have said /px$/ but the doc from MDN says nothing about the standard units// Here the magicvarNUMBER_OF_LINES_TO_SHOW = 2;
        element.style.height = (NUMBER_OF_LINES_TO_SHOW * lineHeight) + "px"; // or the unit in use for that browser
    }();
</script>

(During these tests, I updated from firefox 45.0.2 to firefox 46) and restarted the browser... Among extensions not working, seem text-overflow isn't too

Solution 2:

I have implement a quick solution if you just understand what I am doing you can get a solution for this problem

I have 2 methods one is counting line numbers, the other one returns text in the exact line by given lineNumber.

by this approach if line counter greater than 2, then get the first 2 lines of text create another templete and append it to container

Here is my Fiddle

$( document ).ready(function() {

    functioncountLines() {
        var divHeight = parseInt( $(".maxTwoLine").height() );
        var lineHeight = parseInt($('.maxTwoLine').css('line-height'));
        return divHeight/lineHeight;
    }

    functionGetTextLine(lineNumber){
        var lines = $('.maxTwoLine').text().split(' ');
        console.log(lines);
        for(var i = 0;i < lines.length;i++){
            if(i === lineNumber)
            {
                return lines[i];
            }
        }        
    }

    $(".clickB").click(function(){
        var lineCounter = countLines();
        if(lineCounter>1)
        {
            var allText = $('.maxTwoLine').text();
            var firstLineText = GetTextLine(0);
            var secondLineText = GetTextLine(1);
            var template = firstLineText + '<div class="ellipsisText">' + secondLineText + '</div>';         
            $('.maxTwoLine').text("");
            $('.maxTwoLine').append(template);
            allText = allText.replace(secondLineText, template);
        }
        var container = ".maxTwoLine";
    });  



});