Cross Browser CSS Ellipsis Tutorial

View Demo 1 (XML For Older FX's)View Demo 2 (CSS For FX)

Justin Maxwell had the original idea behind this concept and goes into further explanation. Below is the code for demo #1 (the XML version). Demo #2 (the CSS version) works, but is not perfect. FX is the only browser that currently does not support or have a vendor specific extension for text-overflow:ellipsis. The following code is the only true fix for now.

CSS

.ellipsis {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-moz-binding:url('ellipsis.xml');
}
p {
width:300px;
padding:10px;
border:1px solid;
}

HTML

<p class="ellipsis">Test Ellipsis Test Ellipsis Test Ellipsis Test Ellipsis Test Ellipsis Test Ellipsis Test Ellipsis Test Ellipsis Test Ellipsis</p>

XML For FX

<?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>

ADVERTISE HERE