Showing posts with label css3 ellipsis. Show all posts
Showing posts with label css3 ellipsis. Show all posts

Friday, 16 December 2011

CSS3 text-overflow ellipsis character

CSS3 text-overflow property, which automatically selects the best truncation point and adds ellipses.
If text overflow is supported, the paragraph will appear as a few words followed by an ellipsis character (...) this property upporte all major browsers.
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis; 
    -ms-text-overflow: ellipsis;
    -moz-binding: url('ellipsis.xml#ellipsis');  
}

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