CSS and ellipsis: Cross-browser practices

Every now and then, say twice a year, I run into the same problem: what is the best cross-browser ellipsis solution? Because I end up searching the internet everytime, I decided the write down my prefererred solution.

The problem is as follows: You have a long sentence and you want to show only the first line and end up with … (the ellipsis) and trunk the rest of the sentence. Of course you can implement a server side solution, but today I prefer a client-side one.

IE6 and IE7 are simple, they support the CSS-property text-overflow, as do the Webkit based browsers Safari and Chrome. Text-overflow is part of the coming CSS3-recommendation, by the way. Because the property is not standardized yet Opera has it’s own implementation -o-text-overflow, while IE8 in standards mode supports -ms-text-overflow.

The only hickup we encouter with Firefox. The current version (Firefox 3.5) still does not support this property… This leaves us for several workarounds:

  • Do nothing. All browsers will show an ellipsis, Firefox just shows nothing. My prefered solution, because it involves less time and effort.
  • Create a Firefox-only selector in your CSS. This can be handy is you have something like Browserhawk installed on your server. Is not 100% waterproof though. Don’t just add the sometimes suggested “:after-content” option. (With something like myclass:after { content: “…” } we could easy add ellipsis to Firefox, but other modern browsers would render the ellipsis twice.
  • Use the “:after-content” setting for all modern browsers and show the ellipsis in IE6 and IE7 with conditional comments.
  • Use a JavaScript solution. Check for example this nice jQuery plugin.
  • Use XUL.

The CSS at last:

.ellipsis { 
  display: block; 
  white-space: nowrap; 
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis; 
  width: 230px;
  overflow: hidden;
}

Bonus:

Toggle the ellipsis view with jQuery:

$(".ellipsis").click( function() { $(this).toggleClass(".ellipsis") });

Disclaimer:

Not all options are tested. Please comment.

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s

%d bloggers op de volgende wijze: