Text-overflow CSS

Sometimes text will have to be clipped. For instance when it overflows the element’s box. When this happens, you want to leave a visual “hint” to the user that text has been clipped. This is were the text-overflow-props come in. The most common way to use it is the ellipsis character: “…” although, as the spec says, “the actual character representation may vary”. Opera supports this as well using it’s vendor prefix: -o-text-overflow.

Support for these features is very limited at the moment, WebKit only supports the short-hand text-overflow, and even that is only partly implemented. text-overflow: ellipsis-word; and text-overflow: inherit; don’t work yet. Internet Explorer, funnily enough, supports this too in IE6 and up, according to the MSDN page about it.

The following two divs contains the following text: “Lorem ipsum dolor sit amet, consectetur”. As you can see, it is clipped. The first uses text-overflow: ellipsis;, the second uses text-overflow: clip;.

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s