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

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 🙂

About The Author

Deepu Balan

Hi there! I’m a web UI/UX architect. This is my online playground, my beautiful space to share my passions, my work and what I find inspiring.

See author's posts