You are here: Reference > CSS > properties > text-overflow

text-overflow property

Browser support:
Specifies how to handle the overflowed area of text.
Use the text-overflow property together with the overflow style property (with a value different from visible) and the white-space style propery (with a value of nowrap). Since the white-space style property is partially supported in Internet Explorer earlier than version 8, for the not supported elements you can use the cross-browser NOWRAP HTML attribute instead.
In Opera, use the -o-text-overflow property instead of the text-overflow property.
JavaScript page for this property: textOverflow. You can find other example(s) there.

Possible values:

 One of the following values: 
clip
Clips the overflowing text content.
ellipsis
(...) is shown for overflowing text content.
Default: clip.

Example HTML code 1:

This example illustrates the use of the text-overflow and -o-text-overflow properties:
<head>
    <style>
        .example {
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            overflow: hidden;
            width: 120px;
            background: #99C6CD;
            white-space:nowrap;
        }
    </style>
</head>
<body>
    <div class="example" nowrap="nowrap">
        Overflowed text is to be visually clipped.
    </div>
</body>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content