Tuesday, July 5

Cool CSS3 Tip: Text-Overflow = Ellipsis

You don't have to use lots of Javascript or server-side voodoo coding to get overflowing text to look good. With the new CSS3 feature, you can set the text-overflow property of your text to ellipsis, thus letting the browser handle this so-needed task for you.

CSS3 text-overflow: ellipsis DEMO

Dummy text. Move the slider below to change the width of this text and see how this works.

Width = 100%

The CSS Code

While this is a very simple attribute, getting this to work just the way you expect it can be somewhat tricky. All you have to keep in mind is that while the text-overflow attribute is what controls the ellipsis effect, just setting this one attribute by itself isn't enough.
.elip { 
  text-overflow: ellipsis;
  overflow: hidden; 
  white-space: nowrap; 
  width: 100%; 

<p class="elip">Some text to be wrapped by the CSS3 ellipsis attribute<p>

Notice that along with the text-overflow, you also need to make sure you specify two other properties: white-space (keeping the text from wrapping into multiple lines), and overflow (which keeps the text from bleeding through its container).

Other than that, this is pretty simple. Try out different ways to use this and see how it works for yourself. One thing I did notice is that if you use this property with a big paragraph that takes up multiple lines, instead of only applying the ellipsis to the last word or whatever, every line that has a break (either through a br tag or a new paragraph) will be ellipsed. Lines of text that expand beyond the one line will not wrap (due to the white-space property). So I think this will be for useful in situations where the ellipsis is applied to a header or title type text. Anything beyond a line (such as a summary) might not work so well, or at least I haven't figured out how to make it work right with a block of text. But that's CSS3 for you... enjoy!

1 comment: