O'Reilly

Elegant Overflow with CSS Ellipsis

By on  

9/27/2011: As of Today, Firefox 7 supports this text-overflow: ellipsis.

Overflow with text is always a big issue, especially in a programmatic environment. There's always only so much space but variable content to add into that space. I was recently working on a table for displaying user information and noticed that longer strings were breaking the table display. The obvious solution was adding an overflow: hidden setting to the table cells, but even then the text looked unnaturally cut off. The way to make text overflow elegant is with ellipses, and CSS' text-overflow property. Let's check it out!

The CSS

The CSS behind creating ellipses is quite simple, combining width, wrapping, overflow, and text-overflow:

.dataTable td {
	/* essential */
	text-overflow: ellipsis;
	width: 200px;
	white-space: nowrap;
	overflow: hidden;
	
	/* for good looks */
	padding: 10px;
}

Setting the width provides the obvious boundary for, white-space prevents normal next-line wrapping, hiding overflow ensures the width dimension is respected, and the text-overflow setting provides the ellipsis. Great, right? But there's a problem...

Firefox and Ellipsis

Unfortunately Firefox doesn't currently support text-overflow:ellipsis. There's one simple solution for Firefox provided by the Dojo Toolkit: dojox.html.ellipsis. This resource uses an iFrame shim to create the ellipsis. Here's how to use it:

// require the resource
dojo.require("dojox.html.ellipsis");

After requiring the JavaScript resource, it's time to place a dojoxEllipsis node within the page, signaling that the dojox.html.ellipsis resource should ellipsize it:

Pellentesque habitant morbi tristique senectus et netus et malesuada...

Any time the DOM tree is modified, Dojo scours the page for elements with the dojoxEllipsis CSS class and ellipsizes them.

Implementing dynamic ellipses for content is a simple, subtle, and effective way of elegantly managing content within an confined. With the exception of Firefox, text-overflow:ellipsis is supported by the major browser vendors. Dojo's implementation is stable and effective but can slow down the page if there are many ellipsized elements on a page. Happy ellipsizing!

Track.js Error Reporting

Upcoming Events

Recent Features

  • 7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • Write Simple, Elegant and Maintainable Media Queries with Sass

    I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

Incredible Demos

Discussion

  1. Nice article! Firefox 7 has support for text-overflow: ellipsis; …at long last!!

  2. Brilliant! I can’t wait to use this

  3. Added a demo as requested.

  4. Hi,

    Idea is good. But I miss the punctation mark.

    Example 1: “This is very important!” => “This is…!”
    Example 2: “Is this a required field?” =Y “Is this…?”

    I think this will help.

    Greetings

    Andreas

  5. Ida

    Update! As of Fx7 released this week Firefox do support text-overflow. *happy dance*

  6. Tofudisan

    Just curious as the the effect of this on accessibility. Correct me if I’m wrong but this method is using a table element to display truncated data?

    While it looks nice doesn’t it require the user to print or disable the style sheet in order to see the data in the cells? Or would you use a hover effect to display the text (i.e. a info bubble)?

  7. Kunal

    Currently, it does right-type ellipsis. Is there a way to do left-type ellipsis?

    …foo.txt

    or may be, center-type ellipsis?

    C:\….foo.txt

    • Axel Grude

      you can get left ellipsis by choosing direction: rtl; not sure if you need to reverse the string before applying that. I haven’t found any center ellipsis in CSS unfortunately (May 2015).

  8. Marco

    Hi

    I’m also interested in left-type ellipsis. Has anyone some hints?

    Regards

    Marco

  9. Dude

    Dude, this ellipse fix is exactly what I needed. Even matched the width of the left-nav column! Thanks dude. This was a bulls-eye fix since you need ALL THREE pieces in the element (i.e. white-space, overflow, and text-overflow) to make it work. Cheers. Internet rules.

  10. Carlos

    Great! It saved me the day. Thanks a lot!

  11. werner

    But what happens if you need column with different width? This only works when all columns have the same width.

  12. Kanagan

    Hi

    Please let me know, Is it possible to show the dots at second or other lines.

    Lorem Ipsum is simply dummy text of the …

    • I don’t believe that’s possible at the moment but I’m happy for someone to prove me wrong!

  13. Nice tutorial. Thanks for this.

  14. Nice tut you’ve got there.

    I recently posted a tutorial on how to control content overflow in HTML using CSS overflow property on my blog.

    Here’s the link: http://inyavic.blogspot.com/2014/02/how-to-control-content-overflow-in-html.html

  15. Ankit

    Can be done without dojox:

    #test {
        width: 50px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    
    #test:hover {
        overflow: visible;
    }

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...

  • Serve a Directory with PHP

    Many developers have a giggle at PHP, even looking down at the language, but let's be honest:  most of our blogs are powered by it (WordPress) and it's a great language to dabble around with.  I cut my teeth on PHP, though I prefer to avoid PHP these days. But...