Cross-browser multi-line text overflow with ellipsis appended within a fixed width and height

Question

I made an image for this question to make it easier to understand.

Is it possible to create an ellipsis on a

with a fixed width and multiple

Answer 1

Not an exact answer to the question, but I came across this page when trying to do very similar, but wanting to add a link to "view more" rather than just a straightforward ellipsis. This is a jQuery function that will add a "more" link to text that is overflowing a container. Personally I'm using this with Bootstrap, but of course it will work without.

To use, put your text in a container as follows:

    

        
The long text goes in here
    

When the following jQuery function is added, any of the divs that are larger than the adjustheight value will be truncated and have a "More" link added.

$(function(){
    var adjustheight = 60;
    var moreText = '+ More';
    var lessText = '- Less';
    $(".more-less .more-block").each(function(){
        if ($(this).height() > adjustheight){
            $(this).css('height', adjustheight).css('overflow', 'hidden');
            $(this).parent(".more-less").append
                ('' + moreText + '');
        }
    });
    $(".adjust").click(function() {
        if ($(this).prev().css('overflow') == 'hidden')
        {
            $(this).prev().css('height', 'auto').css('overflow', 'visible');
            $(this).text(lessText);
        }
        else {
            $(this).prev().css('height', adjustheight).css('overflow', 'hidden');
            $(this).text(moreText);
        }
    });
});

Based on this, but updated: http://shakenandstirredweb.com/240/jquery-moreless-text