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]

11 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

gowsalya said...

I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.
Best Python Training Institute in Bangalore

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

amar said...

Nice Blog Python Training in Bangalore

DeepikaOrange said...

The knowledge of technology you have been sharing thorough this post is very much helpful to develop new idea. here by i also want to share this.

Software Testing Training
Software Testing Training in Chennai
Software Testing Training in OMR
Software Testing Training in Velachery
Software Testing Training in Thiruvanmiyur

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

nisharoshan said...

Keep up the great work, I read few blog posts on this site and I believe that your website is really interesting and has loads of good info.

Web Designing Training Course in Chennai | Certification | Online Training Course | Web Designing Training Course in Bangalore | Certification | Online Training Course | Web Designing Training Course in Hyderabad | Certification | Online Training Course | Web Designing Training Course in Coimbatore | Certification | Online Training Course | Web Designing Training Course in Online | Certification | Online Training Course