How to add ellipsis after two lines?

Question

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 bigger than that I want to show an ellipsis after the second line.

Here is my code:

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

It is different from this because it and in second line.Any update regarding this ?

possible duplicate of [CSS: Text overflow ellipsis on two lines, is it possible?](http://stackoverflow.com/questions/15909489/css-text-overflow-ellipsis-on-two-lines-is-it-possible) — Hidden Hobbes, Jul 07 '15 at 09:57
why does using Angular prevent you from also using jQuery plugins? — Alnitak, Jul 07 '15 at 10:20
could you please add this in my plunker..how to use this plugin with angular js — user944513, Jul 07 '15 at 10:21
ignore angular, just load the plugin just like you would without it. — Alnitak, Jul 07 '15 at 10:56
@Alnitak I loaded still not work check http://plnkr.co/edit/RRREoWNvZ9Rex0SxF4cO?p=preview — user944513, Jul 07 '15 at 10:57
Here is a really elaborate round-about way that does the same. *Note:* Did this just to try it out - not great quality - don't use it. http://jsfiddle.net/4mttynga/2/ — techfoobar, Jul 07 '15 at 13:55

score 0 · Answer 1 · answered Jul 07 '15 at 11:42

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() {

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

    function GetTextLine(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";
    });  



});

@user944513 not now, maybe later If I can have time for it? – Mehmet Eren Yener Jul 07 '15 at 11:50 — Mehmet Eren Yener, Jul 07 '15 at 11:50
I HAVE LOT OF TIME BUT PLEASE post answer – user944513 Jul 07 '15 at 11:57 — user944513, Jul 07 '15 at 11:57
@user944513 Okay I will provide an answer later – Mehmet Eren Yener Jul 07 '15 at 11:58 — Mehmet Eren Yener, Jul 07 '15 at 11:58

score 0 · Accepted Answer · answered Apr 28 '16 at 08:12

Following these references,

Window.getComputedStyle(...)
Element.clientHeight instead of this Element.getBoundingClientRect()
line-height
box-sizing
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 iframe
        var 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 magic
        var NUMBER_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

How to add ellipsis after two lines?

2 Answers2

Following these references,

The solution

Linked