text-overflow
Description
The text-overflow property sets what to do for
overflowed text.
| Item | Value |
|---|---|
| Initial value | clip |
| Inherited | No. |
| Version | CSS3 |
| JavaScript syntax | object.style.textOverflow="ellipsis" |
Syntax and Property Values
text-overflow: clip|ellipsis|string;
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 |
Example
<!DOCTYPE html>
<html>
<head>
<style>
div.test<!--from w w w. j ava2 s .c o m-->
{
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>
The code above generates the following result.
