matt laine dot com / blog

Archive for February, 2010

CSS text truncation with ellipsis…

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

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 more...

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...