CSS Property text-overflow








The text-overflow property sets what to do for overflowed text.

Summary

ItemValue
Initial value clip
Inherited No.
Version CSS3
JavaScript syntax object.style.textOverflow="ellipsis"

CSS Syntax

text-overflow: clip|ellipsis|string;




Property Values

The property values are listed in the following table.

Value Description
clip Clip the text
ellipsis Add an ellipsis ("...") for clipped text
string Use the string for clipped text

Browser compatibility

text-overflow Yes Yes Yes Yes Yes

Example

An example showing how to use text-overflow CSS property.

<!DOCTYPE html>
<html>
<head>
<style> 
div.test<!--from   w  ww. j a v  a 2s  . c om-->
{
    white-space:nowrap; 
    width:12em; 
    overflow:hidden; 
    border:1px solid #000000;
}
</style>
</head>
<body>
<div class="test" style="text-overflow:ellipsis;">
     This is some long text. 
     This is some long text. 
     This is some long text. 
     This is some long text. 
     This is some long text. </div>
<div class="test" style="text-overflow:clip;">
     This is some long text. 
     This is some long text. 
     This is some long text. 
     This is some long text. 
     This is some long text. 
     This is some long text. </div>

</body>
</html>

Click to view the demo