Text-overflow CSS3 property explained – Pure CSS solution to get ellipsis

Text-overflow CSS3 property explained – Pure CSS solution to get ellipsis
css property text-overflow ellipsis explained - cross browser compatible

The introduction of CSS3 brings revolutionary changes to the day-to-day life of web designers. There are so many crazy new features that CSS3 has in store for us. Things which were usually done with complex javascript code can now be easily done with CSS3. One such feature is known as Text-Overflow.

Sometimes through the web design process we may have to clip some dynamic text before it’s being wrapped to the next line of a fixed width box. At the same time we want to provide a visual hint to the user that some text-clipping has been occurred and the text which is being displayed is not complete. The text clipping is usually represented with the ellipsis character (…)

With CSS3 we can easily achieve this using the text-overflow CSS property.

1
text-overflow: ellipsis;

The ellipsis value causes three periods (…) to be appended to the text.

text-overflow: ellipsis comes into play only when:

1. The box has overflow other than visible.
2. The box has white-space: nowrap.

Example


We have a DIV with 150 pixel width to display the company names from the database.
We do not want the values in the company name box to be wrapped to the next line though.
We have to clip the dynamic text beyond the 150 pixel width.
We also want to provide the user with a visual hint that some text-clipping has been occurred and the text which is being displayed is not complete.
We want the entire text to be visible while we mouseover the short text.

Let’s see how this can be achieved with CSS3.

The Code in Fiddle

Browser Support


The webkit, presto and trident engines have native support for this feature. The strange but funny part here is, text-overflow: ellipsis CSS3 property which is being supported by almost all major browser versions (including IE6) is yet to be implemented in firefox, but fortunately there is a solution for this.

Ellipsis in Firefox

Unfortunately gecko (the layout engine of Firefox) does not support this property, However it does support XBL, with the help of which we can build our own realization of this feature.

To enable the ellipsis feature in firefox, we need to add a single line of code to our stylesheet.

1
-moz-binding: url( 'bindings.xml#ellipsis' );

and to disable this feature, just add

1
-moz-binding: url( 'bindings.xml#none' );

The next step is to create a file called bindings.xml in the same location where the CSS file is. We can use any text editor like notepad to create this file, copy the following code into that file and save it as bindings.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!--?xml version="1.0"?-->
    <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
    <binding id="none">
        <content><children></children></content>
    </binding>
 
    <binding id="ellipsis">
        <content>
            <xul:label crop="end"><children></children></xul:label>
        </content>
        <implementation>
            <field name="label"> document.getAnonymousNodes( this )[ 0 ] </field>
            <field name="style"> this.label.style </field>
            <property name="display">
                <getter> this.style.display </getter>
                <setter> if( this.style.display != val ) this.style.display= val </setter>
            </property>
            <property name="value">
                <getter> this.label.value </getter>
                <setter> if( this.label.value != val ) this.label.value= val </setter>
            </property>
            <method name="update">
 
                    var strings= this.textContent.split( /s+/g )
                    if( !strings[ 0 ] ) strings.shift()
                    if( !strings[ strings.length - 1 ] ) strings.pop()
                    this.value= strings.join( ' ' )
                    this.display= strings.length ? '' : 'none'
 
            </method>
            <constructor> this.update() </constructor>
        </implementation>
        <handlers>
            <handler event="DOMSubtreeModified"> this.update() </handler>
        </handlers>
    </binding>
 
    </bindings>

Final cross browser compatible code

1
2
3
4
5
6
7
.company-wrap ul li {
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url( 'bindings.xml#ellipsis' );
    white-space: nowrap;
    overflow: hidden;
}

Conclusion

CSS3 is becoming the main tool of web designers around the world to create cutting edge websites with minimum code. There are painless single-line solutions for so many things which were previously done with Photoshop or javascript. Start exploring the whole new possibilities of CSS3 and HTML5 today, you will be really surprised, I am sure 🙂

27 thoughts on “Text-overflow CSS3 property explained – Pure CSS solution to get ellipsis

  1. Pingback: 100 Great CSS3 Tutorials | Stylish Web Design
    1. The XUL/XBL client side solution described in the post will no longer work in Firefox 4. Because of some security issues the XUL/XBL support has been removed from FF4. May be you need to think about some client side scripting to get this done in FF4.

      Thanks,
      Deepu

  2. FYI, your Firefox solution will no longer work when Firefox 4 is released. Client-side XUL/XBL has had quite a few security issues with near zero actual benefit, so it has been removed. Extensions and XULRunner-based apps still use XUL/XBL, of course.

    Firefox 4 will likely require client-side script to get this effect, unfortunately.

  3. This is a pretty cool trick, but frankly, a lot of the “cool” CSS3 stuff requires so many browser specific settings, it is not really that useful. Don’t get me wrong, I love CSS3, and use plenty of rounded corners, shadow, gradients and the like. I just feel like we are pushing square pegs in round holes. That being, with such sporadic support for certain properties, and CSS3 (according to css3.info) is still in early development, we really shouldn’t rely on CSS.
    It seems to me, that a Web site isn’t just HTML and CSS. I love clean, semantic code, with styling in stylesheets, but I see a lot of effort going to replacing or avoiding useful, efficient, time tested techniques to accomplish something cool, but not really styling.
    Sorry for the flame bait, it was a good article and interesting, not trying to take anything away from what you’ve written. More of a commentary on the state of this whole HTML5, CSS3 bandwagon everyone seems to be on. Personally, I will be writing XHTML Strict for a good while, using CSS3 only as final layer of shine and sparkle.

  4. Most excellent. I didn’t think this were possible (at least, not yet). Great work, much appreciated. Perhaps Mozilla will support these in FF4 (coming early this year) so we don’t have to result to hacks like these.

    1. Thanks for dropping by Leonardo…!
      You have an interesting point here… Ellipsis on links in firefox. If you want to apply ellipsis on links (only in firefox)…
      1. you have to remove the bindings.xml url reference from the li class (.company-wrap ul li)
      2. Add a new css rule for links, in my example (.company-wrap ul li a { -moz-binding: url( ‘bindings.xml#ellipsis’ ); })

      This will solve the issue… Pls try it and lemme know if you need any further assistance.

      Thanks n regards,
      Deepu

  5. Pingback: Round Table: How to utilize the new css3 in your wordpress designs and 1on1 - Wordpress Video Tutorials
  6. Pingback: zabox.net

Leave a Reply to Nealreal Cancel reply

Your email address will not be published. Required fields are marked *