HTML - DOM Style Object textOverflow Property

Quiz

HTML DOM Style Object textOverflow property is used for specifying the behavior of text when it overflows the containing element.

Syntax

Set the textOverflow property:

object.style.textOverflow= "clip | ellipsis | string | initial | inherit";

Get the textOverflow property:

object.style.textOverflow;

Property Values

Value	Description
clip	It is the default value which clips the text.
ellipsis	It displays the clipped text as ellipsis.
string	It is used to render the given string to display clipped text
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents the text overflow property of an element.

Example of HTML DOM Style Object 'textOverflow' Property

The following example sets the textOverflow property of div element to ellipsis.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object textOverflow Property
    </title>
    <style>
        #overflow {
            border: 1px solid black;
            background-color: #04af2f;
            color: whitesmoke;
            width: 150px;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <p>
        Click to change set text overflow.
    </p>
    <button onclick="funTwo()">Ellipsis</button>
    <button onclick="fun()">Clip</button>    
    <div id="overflow">
        JavaScript is a lightweight, interpreted
        programming language. It is commonly used
        to create dynamic and interactive elements
        in web applications.
        <br>
        JavaScript is very easy to implement because
        it is integrated with HTML. It is open
        and cross-platform.
        <br>
        This JavaScript tutorial has been designed
        for beginners as well as working professionals
        to help them understand the basic to advanced
        concepts and functionalities of JavaScript.
        <br>
        It covers most of the important concepts
        related to JavaScript such as operators, control
        flow, functions, objects, OOPs, Asynchronous
        JavaScript, Events, DOM manipulation and much more.
    </div>
    <script>
        function funTwo() {
            document.getElementById("overflow")
                .style.textOverflow = "ellipsis";
        }
        function fun() {
            document.getElementById("overflow")
                .style.textOverflow = "clip";
        }
    </script>
</body>
</html>

Supported Browsers

Property
textOverflow	Yes 1	Yes 12	Yes 7	Yes 1.3	Yes 11

html_dom_style_object_reference.htm

Print Page