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
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
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:
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:
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);