CSS Property text-overflow
The text-overflow property sets what to do for
overflowed text.
Summary
| Item | Value |
|---|---|
| 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>