CSS word ellipsis ('…') after one or two lines

Question

I\'m trying to create a word-wrap in JavaScript using CSS, and the condition is:

If DIV contains one very long word, such as \"asdasfljashglajksgkjasghk

Answer 1

when you'll be allowed to use jQuery you could see the dotdotdot plugin at this link.. very simple to use and it works great!

For the moment i can suggest you to have a look at this fiddle! whould work the text-overflow: ellipsis

Answer 2

Displaying the ellipsis needs to be handled differently when the width of container is fixed and percentage.

• When width of container is fixed

    .nooverflow{
        display: inline-block;
        overflow: hidden;
        overflow-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

• When width of container is in percentage or auto, in this scenario define another tag in that container to render the text and specify width as 0 and min-width as 100%, that way it will take the width of container and show the ellipsis. Below is the LESS class to be used:

    .nooverflow{
        display: inline-block;
        overflow: hidden!important;
        overflow-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap!important;
        width: 0;
        min-width: 100%;
    }

Answer 3

I know I'm a bit late with the anwser but I just wrote a pice of code that accomplices that:

    if ($('your selector').height() > 50) {
        var words = $('your selector').html().split(/\s+/);
        words.push('...');

        do {
            words.splice(-2, 1);
            $('your selector').html( words.join(' ') );
        } while($('your selector').height() > 50);
    }

and of course you should save the jQuery selector in a variable so you don't query the DOM every time.