Saturday 12 November 2011

Text-overflow property - css3 ellipsis

Some times when data comes dynamically it may fall outside the element’s rendering box. CSS3 provides a great convenience when it comes to truncating too-long text: the text-overflow property,this property allows the clipped content to be visually represented by the string “…” (called an “ellipsis”) in the non-clipped area. Most modern browsers already support the CSS3 text-overflow property, which will automatically calculate the right place to truncate text, and add the ellipsis (except in Firefox). It works for Internet Explorer, Safari, Chrome and Opera.

Syntax
text-overflow: clip|ellipsis|string;

Style:
<style>
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
</style>
-o-text-overflow: ellipsis is how to make it work in Opera. 
This works from at least Opera 9.0. 
 
If you need to support firefox too then use jQuery.dotdotdot, plugin. It is a advanced cross-browser ellipsis for multiple lines content.

For detail and download visit

No comments:

Post a Comment