matt laine dot com / blog

CSS text truncation with ellipsis…

by matt laine on Feb.12, 2010, under CSS, Firefox, WebKit, web development

I have been working on a project for several months now, that has a reoccurring feature for just about every line of text; the text truncates with an ellipsis (”…”). Why truncate your text when you can just let your text wrap naturally? There are several reasons why you might not want your text to wrap:

  • the size of the text (number of characters) is unknown
  • the text will get localized into several languages
  • the text might have a container with a fluid height or width
  • a page has to be compatible on mobile devices, multiple platforms

text-overflow: ellipsis;

The most obvious way to do this is to use the CSS rule text-overflow: ellipsis;. This will automatically clip your text depending on the size of the container, and apply “…”. A few important things to note are the white-space:nowrap and overflow:hidden must be in effect. Also, the element must either be a block-element (like DIV, P, or UL) or inline-block (if the browser supports it).

Here is an example:

<style type="text/css">

.truncate {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>

<div class="container">
  <p class="truncate">Hi, I'm a really long line of text
that is going to get truncated by my 200 pixel wide parent element</p>
</div>

Hi, I’m a really long line of text that is going to get truncated by my 200 pixel wide parent element.

Text-overflow is supported on Internet Explorer and WebKit (Opera supports it’s own -o-text-overflow). If you are browsing in Firefox, you’ll notice that there is no ellipsis.

Works for IE6 but not Firefox?

Because, according to the Mozilla Developer Center text-overflow has no W3C specification, Firefox does not support this property. This has been a bug for a long time, and there is no indication on when Firefox support might become available.

Hacking Support in Firefox

What happens when browsers don’t behave the way we want? We hack.

The only working hack I’ve found is the same one discussed here and here, and basically using a XBL binding in CSS with the Firefox supported -moz-binding property. The CSS is bound to a XUL document and tells the element(s) to tail truncate, which by default applies an ellipsis.

XUL file (ellipsis.xml):

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
	<binding id="ellipsis">
		<content>
			<xul:window>
				<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
			</xul:window>
		</content>
	</binding>
</bindings>

And so in our CSS we’ll have:

<style type="text/css">
.truncate {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  -moz-binding: url(ellipsis.xml#ellipsis);
}
</style>

Hi, I’m a really long line of text that is going to get truncated by my 200 pixel wide parent element.

Cross-browser Caveats

I found out the hard way that there are several caveats to using the Firefox XUL/XBL hack:

  • the ellipsis.xml file (and CSS file) must be on the same domain as the webpage! This means that if you are going to source to and external server for these assets, Firefox will not display properly
  • your text may no longer be selectable.
  • line-height may be ignored

Also, the CSS must select the element that is truncating; the style will not cascade down into other elements if there are siblings that are block-elements (like div, p, or ul);

<style type="text/css">
.truncate {
  width: 100px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  -moz-binding: url(ellipsis.xml#ellipsis);
}
</style>

<div class="truncate">
  Blah, blah, blah. I will not truncate!!
  <p class="truncate">Yessir! I truncate looooooong time!!</p>
</div>
Blah, blah, blah. I will not truncate!!

Yessir! I truncate looooooong time!!

10 comments for this entry:
  1. Avram

    Matt, thanks very much for posting this. It’s a useful solution. The only real fly in the ointment is that FF 3.6 seems to have introduced a bug in the -moz-binding property. Once set, it can’t be reset. So for any dynamic page, the ellipses can not be removed should they no longer be required. I’m really hoping that either this gets fixed or the text-overflow property is introduced in FF.

  2. matt laine

    That’s interesting. I haven’t tried to apply then remove the ellipsis dynamically in FireFox. I know there is a bug filed for Firefox to get this implemented, but seems like a low priority for them.

  3. Dave

    Matt, you’ve got a pretty impressive looking page here. Did you create this theme or was it a pre-fab? I’d be interested in using the background in an open source project if I can obtain permission from the original author. Any help would greatly be appreciated. Best form of contact is via email. Thanks!

  4. Bruno

    The problem is when you want to apply this taking in consideration the max-height, so you can have multiple lines with centered text, that’s the hard part to achieve…

  5. evindha

    Here’s the other problem..
    If the text contains a link, it doesn’t work.
    For example, the text is :
    Click this link.
    The link will be undisplayed on FF. But on chrome, opera, it runs well.
    Any solution for it ?
    Thanks

  6. John

    This doesn’t work in Firefox 4 Beta 6. Maybe it’s just because it’s beta and that this will work with the release version. Any ideas?

  7. matt laine

    Looks like FF4 removed support for -moz-binding in the CSS. See the updated post. If anyone finds a FF4 way to do this, please let me know.

  8. tofulfai

    “This will automatically clip your text depending on the size of the container, and apply “…”. A few important things to note are the white-space:nowrap and overflow:hidden must be in effect. Also, the element must either be a block-element (like DIV, P, or UL) or inline-block (if the browser supports it).”
    Are you sure that this is so?

  9. Ashwini

    where to save the xml file?

  10. Erasmo Hissom

    Great post, you’ve got pointed out some great points , I also believe this s a quite outstanding website.

Leave a Reply

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...

Archives

All entries, chronologically...