When you want to avoid that text in a web page wraps, you can use:
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">
<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
Then mark all HTML elements you would like to show the ellipsis character on overflow with the class
<div id="BreadCrumbs" class="ShyText Ellipsis">
Then add the following to your CSS:
- for WebKit-based browsers (Safari, Chrome, etc.) and for Internet Explorer 7 and before;
- for Opera;
- for Internet Explorer 8 and 9;
- 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:
- applying the
.Ellipsis class to an inline element causes the element to disappear;
- in Firefox 3.0 (not in Firefox 2.0), soft hyphens inside
.Ellipsis elements always show as dashes;
- 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.