RSS

Ellipsis in all Modern Browsers (Updated x5)

16 Oct

When you want to avoid that text in a web page wraps, you can use:

   overflow:hidden

However, it’s nice to show to users that some content is actually missing. This is typically done with an ellipsis character, that is displayed as three dots:

   ...

Getting this working across all modern browsers has always been a pain in the neck, but there is an easy solution a hack that works around the issue, to a certain extent. Note that Firefox 4 is not supported and neither will Firefox 5 be. Howevere

First, make sure you have a small ellipsis-xbl.xml file on your web server that is served with the content type text/xml, with the following contents:

<?xml version="1.0" encoding="UTF-8"?>
<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>

Then mark all HTML elements you would like to show the ellipsis character on overflow with the class Ellipsis, e.g.:

   <div id="BreadCrumbs" class="ShyText Ellipsis">

Then add the following to your CSS:

   .Ellipsis {
      text-overflow:ellipsis;
      -o-text-overflow:ellipsis;
      -ms-text-overflow:ellipsis;
      -moz-binding:url(/ellipsis-xbl.xml#ellipsis)
}

Elaboration:

text-overflow
for WebKit-based browsers (Safari, Chrome, etc.) and for Internet Explorer 7 and before;
-o-text-overflow
for Opera;
-ms-text-overflow
for Internet Explorer 8 and 9;
-moz-binding
for Gecko 1.x-based browsers (Firefox 3.x or earlier, Camino, etc.)

Note that the text-overflow will be standardized as of the CSS 3 standard, which is currently still in draft. Firefox 6 may add support for it.

Credit for the Gecko solution go to Rikkert Koppes and William Khoe, see the article text-overflow: ellipsis for firefox.

Update (Oct. 22, 2008): The solution for Gecko-based browsers (Firefox, etc.) is far from perfect. The solution has at least the following issues:

  1. applying the .Ellipsis class to an inline element causes the element to disappear;
  2. in Firefox 3.0 (not in Firefox 2.0), soft hyphens inside .Ellipsis elements always show as dashes;
  3. text inside a .Ellipsis element can no longer be selected.

Update (August 11, 2009): Mozilla (in the person of Simon Montagu) is working on a solution, which may or may not go into Firefox 3.6/Gecko 1.9.2. Vote for bug 312156 if you think it’s important.

Update (August 13, 2009): Don’t expect the solution to go into Firefox 3.6/Gecko 1.9.2 (scheduled for release fall 2009), the bug has been tagged as “-wanted1.9.2” (starting with a minus-sign) meaning it’s not planned for the upcoming release. It may still go into Firefox 3.7, which is tentatively scheduled for release in 2010, see the Mozilla Project Meeting Minutes of July 20, 2009.

Update (August 24, 2009): Devon Govett provides a nice jQuery-based solution that at least allows you to resolve the issue when JavaScript is enabled. It works like a charm, at least on Firefox 3.5.2.

Advertisements
 
8 Comments

Posted by on 16 October 2008 in css, css3, ellipsis, firefox, gecko, mozilla, overflow, text-overflow

 

8 responses to “Ellipsis in all Modern Browsers (Updated x5)

  1. krisbiz

    12 November 2008 at 14:22

    >Thanks for this nice solution. Would it be equally effective to just add the custom styling where the problem currently appears? I am currently using a template where they are yousing ellpsis without providing a solution:/

     
  2. comecme

    21 July 2009 at 09:05

    >I have one problem with this solution. If the html element contains a sequence of spaces, they get rendered by FF. If the html contains tabs they don't get rendered.Any idea on how to fix this?In this sample, the . represent spaces[div class="ellipsis"]….Spaces not ok[/div]

     
  3. Ernst de Haan

    3 August 2009 at 08:33

    >@comecme: No idea how to fix that. Note that the 'solution' I provide is in fact just a dirty hack. The real solution should come from the Mozilla developers, see bug report 312156.

     
  4. Tao's code place

    30 September 2009 at 15:32

    >Great extension. One bug, if there are child nodes (without any text), it will be truncated. Eg:[div class='ellipsis"][img src="some.gif" /][/div]will break. Any idea?

     
  5. Shaggy

    2 December 2009 at 03:58

    >I am working on this .Can't you just unbind on :hover and fix most of these 'bugs'?.Test { text-overflow: ellipsis; -o-text-overflow :ellipsis; -moz-binding: url('ellipsis.xml#ellipsis'); border: 1px solid #ddd; white-space: nowrap; overflow: hidden; padding:2em; width:50%; }.Test:hover { XXtext-overflow: normal; -moz-binding: url('ellipsis.xml#blank'); XXoverflow: visible; }

     
  6. Krishan

    15 September 2010 at 08:43

    >This solution is not working for me. I followed all the steps given here.

     
  7. spudley

    7 January 2011 at 14:26

    >It's worth pointing out that Firefox 4 is removing the ability to use XUL in this way, so this hack will no longer work.Here's hoping they get round to implementing a proper CSS ellipsis in Firefox soon now — it's starting to get old now that its *still* the only browser not to support it.

     
  8. Daniel G Blázquez

    30 March 2011 at 19:37

    >-o-text-overflow is not needed in Opera 11.You can use text-overflow instead of -ms-text-overflow in IE

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: