In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > textOverflow

textOverflow style property

Browser support:

Specifies or returns how to handle the overflowed area of text.

Use the textOverflow property together with the overflow style property (with a value different from visible) and the whiteSpace style propery (with a value of nowrap). Since the whiteSpace 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 OTextOverflow property instead of the textOverflow property.

Syntax:

object.textOverflow;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: text-overflow

Possible values:

The type of this property is string.

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the textOverflow and OTextOverflow properties in JavaScript:

<head>
    <style>
        #myDiv {
            overflow: hidden;
            width: 120px;
            background: #99C6CD;
            white-space:nowrap;
        }
    </style>

    <script type="text/javascript">
        function ChangeTextOverflow (elem) {
            var div = document.getElementById ("myDiv");
 
            if ('textOverflow' in div.style) {
                div.style.textOverflow = elem.innerHTML;
            } else if ('OTextOverflow' in div.style) {
                div.style.OTextOverflow = elem.innerHTML;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv" nowrap="nowrap">
        Overflowed text is to be visually clipped.
    </div>

    <br />
    Change text-overlow property:
    <br />
    <a onclick="ChangeTextOverflow (this)">clip</a>
    <a onclick="ChangeTextOverflow (this)">ellipsis</a>
</body>