Posts tagged with “ellipsis”

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

Saturday, 27 November, 2010
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. Read the rest of this entry »