"Having the ability to chop long lines of text at the edge of a content area and show three dots to indicate there is some missing."
http://www.css3.info/preview/text-overflow/
While it's something that IE6 has been able to do since the 90s and most other browsers now support, Firefox has still been lacking in this area for some time.
Obviously you can trim the text on the server before sending it to the client but you cannot guarantee which font or indeed which font-size the user is using so this will always be a best guess not a science.
I've seen a few reasonable attempts at solving this over the years but none have ever come quite as close as this one to being workable.
Firefox *should* be able to do this easily. After all, the tabs often contain an ellipsis when the page title is too long.
This solution is actually a cleaned up version of HedgerWow's script based XUL solution and a pure CSS delivery method by Rikkert Koppes.
To get it working normally first...
.ellipsis
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
...to get it working in firefox as well, you will also need to do this...
.ellipsis
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
}
Where ellipsis.xml is a
<?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>
Known issues:
This solution doesn't work for innerHTML, only innerText.
The text cannot be selected by the user.
A tooltip should in theory be possible but I haven't looked into this fully yet.
Sources:
http://www.rikkertkoppes.com/thoughts/2008/6/
Subscribe