CSS3 Text Overflow(text-overflow) Property with example

The text-overflow property specifies what should happen when text overflows the containing element.

syntax of this property is

text-overflow: clip|ellipsis|string;

All the latest browsers support this property.

The possible values are

• clip : Clips the text
• ellipsis : Render an ellipsis ("...") to represent clipped text
• string : Render the given string to represent clipped text

JavaScript syntax of this property is object.style.textOverflow="ellipses"

Example for text-overflow property..

.mydiv{
text-overflow:ellipsis;
width:12em;
border:1px solid #000000;
overflow:hidden;
white-space:nowrap;
}

If you apply this to the following div

<div class="test" class="mydiv">Long text that will not fit in the box</div>

It looks like as follows..

Long text that will no...

CSS3 Other text effects Properties..