CSS3 - Text Overflow

When you are placing a variable amount of text into a fixed space there is always the possibility that the text will not fit. We can make sure that the size of the area remains fixed and doesn't grow in size (and therefore break the page layout) by using overflow:hidden; but this just leaves the text disappearing out of the bottom or right of the area with no warning.

CSS3 introduces a new property called text-overflow to resolve this issue. There are three values that can be used with this property. The default value is clip which just clips the text at the point where it will no longer fit, just the same as if you didn't specify the property at all. Far more useful is ellipse which truncates the text sufficiently before the end of the space to be able to insert an ellipse (three dots very close together that indicate omitted text) at the end. The third alternative is to supply a text string that will be inserted at the end instead of the ellipse.

This property is only supported by some browsers so far and some of those that do support it require the proprietary browser prefix on the property name. Also at present no browser supports the text string option.

Example

p {overflow: hidden; white-space:nowrap; text-overflow:ellipse; }

Limitations

This property is only supported by some browsers so far and some of those that do support it require the proprietary browser prefix on the property name. Also at present no browser supports the text string option.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate