CSS3: Text Overflow

One of the best things about CSS3 is how it handles overflowing text. Even if you introduce character limits in the programming stage, it’s still very difficult to get this right. When using varibale-width fonts, the odd character can overflow from a block and cause havoc with your layout. To be safe you can set the “overflow: ” attribute to “hidden” but this will literally hide anything that overflow, occassionally clipping the middle of a character.

The “text-overflow: ” property in CSS3 aims to rectify that by giving you greater control on how text is rendered. You can set it top clip to do exactly what we talking about above – hide the rest of the text. Or you can use “ellipsis”, to add a “…” to the end of the text when it overflows, or “ellipsis-word” to add “…” to the last renderable word.

This entry was posted in Web Design. Bookmark the permalink.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>