Wednesday, June 24, 2015

Pure CSS Cross-Browser Multi-Line Text with Ellipsis

There are two common ways to do Multi-Line text with ellipsis.  The first is to use CSS that only works on webkit browsers.  The second is to use a javascript plugin.  Below is a third solution that uses pure CSS and works for all browsers.

Lorem ipsum dolor sit amet, consectetur eu in adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
...


[div class="container"]
    [div class="text"]
        [[Text]]
    [/div]
    [div class="ellipsis"]...[/div]
[/div]


[style]
    body {
       margin: 20px;
    }
    .container{
        position: relative;
        background-color: #bbb;
        padding: 20px;
    }
    .text {
       overflow: hidden;
       /*text-overflow: ellipsis; Not needed */
       line-height: 16px;
       max-height: 48px; /* Multiples of line-height */
    }
    .ellipsis {
        position: absolute;
        bottom: 20px;
        right: 20px;
        height: 16px;
        width: 30px;
        background-color: inherit;
        padding-left: 8px;
    }

[/style]

The pure css solution works when the text overflows the available space. However, short text strings do not overflow the space and should not be given an ellipsis.

To solve the short text problem, Implement the javascript solution, below, as well:

[script]
    function getTextWidth(text, font) {
        var canvas = getTextWidth.canvas ||
            (getTextWidth.canvas = document.createElement("canvas"));
        var context = canvas.getContext("2d");
        context.font = font;
        var metrics = context.measureText(text);
        return metrics.width;
    };

    $(".container").each(function() {
        if (getTextWidth(
            $(this).find(".text").text(),
            $(this).find(".text").css("font")
            ) < ($(this).find(".text").width() * 3)) {  // Multiplier is number of lines to show
                $(this).find(".ellipsis").remove();
            }
    });

[/script]

8 comments:

Unknown said...

Quite Interesting post!!! Thanks for posting such a useful post. I wish to read your upcoming post to enhance my skill set, keep blogging.
Regards,
web designing classes in chennai|web design training chennai

saranya said...

I ‘d mention that most of us visitors are endowed to exist in a fabulous place with very many wonderful individuals with very helpful things.
datascience training in chennai

appvn said...

Thank you for sharing your article. Great efforts put it to find the list of articles which is very useful to know, Definitely will share the same to other forums.

Praylin S said...

Thanks fir sharing this with us. This is greatly helpful. Looking forward for more posts.

Corporate Training in Chennai
Corporate Training Companies in Chennai
JavaScript Training in Chennai
JavaScript Course in Chennai
Embedded System Course Chennai
Embedded Training in Chennai
Corporate Training in T Nagar
Corporate Training in Tambaram

gowthunan said...

contribution from other ones on this subject while our own child is truly discovering a great deal. Have fun with the remaining portion of the year.
iosh course in chennai

keerthi said...


I love the information you provide here and can’t wait to take a look when I get home. Web Designing Course Training in Chennai | Web Designing Course Training in annanagar | Web Designing Course Training in omr | Web Designing Course Training in porur | Web Designing Course Training in tambaram | Web Designing Course Training in velachery

nisha said...

The Blog is really nice. every content should very uniquely represented.

Data Science Training Course In Chennai | Data Science Training Course In Anna Nagar | Data Science Training Course In OMR | Data Science Training Course In Porur | Data Science Training Course In Tambaram | Data Science Training Course In Velachery

Ashleel Londa said...

# BOOST Your GOOGLE RANKING.It’s Your Time To Be On #1st Page
Our Motive is not just to create links but to get them indexed as will
Increase Domain Authority (DA).We’re on a mission to increase DA PA of your domain
High Quality Backlink Building Service
Boost DA upto 15+ at cheapest
Boost DA upto 25+ at cheapest
Boost DA upto 35+ at cheapest
Boost DA upto 45+ at cheapest