Skip to content
Related Articles

Related Articles

HTML | DOM Style textOverflow Property

View Discussion
Improve Article
Save Article
  • Last Updated : 08 Sep, 2022
View Discussion
Improve Article
Save Article

The Style textOverflow property in HTML DOM is used to specify the behavior of the text when it overflows the containing element box. 

Syntax:

  • It returns the textOverflow property.
object.style.textOverflow
  • It is used to set the textOverflow property.
object.style.textOverflow = "clip|ellipsis|initial|inherit"

Return Values: It returns a string value, which representing the text-overflow property of an element.

Property Values:

  • clip: It is used to clip the content if it overflows. It is the default value. 

Example: 

HTML




<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style textOverflow Property
    </title>
     
    <style>
        .content {
            background-color: lightgreen;
            height: 100px;
            width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>DOM Style textOverflow Property</b>
    <p>
        The textOverflow property specifies how text
        should be displayed when it overflows the
        container element.
    </p>
    <div class="content">
        GeeksforGeeks is a computer science portal with
        a huge variety of well written <br>explained
        computer science and programming articles,
        quizzes and interview questions. <br>The portal
        also has dedicated GATE preparation and
        competitive programming sections.
    </div>
    <button onclick="setOverflow()">
        Change textOverflow
    </button>
 
    <!-- Script to set textOverflow to clip -->
    <script>
        function setOverflow() {
            elem = document.querySelector('.content');
            elem.style.textOverflow = 'clip';
        }
    </script>
</body>
 
</html>

Output: 

Before clicking the button:

 clip-before 

After clicking the button:

 clip-after

  • ellipsis: It is used to shows ellipsis when the text overflows. 

Example: 

HTML




<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style textOverflow Property
    </title>
    <style>
        .content {
            background-color: lightgreen;
            height: 100px;
            width: 300px;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>DOM Style textOverflow Property</b>
    <p>
        The textOverflow property specifies how text
        should be displayed when it overflows the
        container element.
    </p>
    <div class="content">
        GeeksforGeeks is a computer science portal with
        a huge variety of well written <br>explained
        computer science and programming articles,
        quizzes and interview questions. <br>The portal
        also has dedicated GATE preparation and
        competitive programming sections.
    </div>
    <button onclick="setOverflow()">
        Change textOverflow
    </button>
 
    <!-- Script to set textOverflow to ellipsis -->
    <script>
        function setOverflow() {
            elem = document.querySelector('.content');
            elem.style.textOverflow = 'ellipsis';
        }
    </script>
</body>
 
</html>

Output: 

Before clicking the button:

 ellipsis-before 

After clicking the button:

 ellipsis-after

  • initial: It is used to set this property to its default value. 

Example: 

HTML




<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style textOverflow Property
    </title>
    <style>
        .content {
            background-color: lightgreen;
            height: 100px;
            width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>DOM Style textOverflow Property</b>
    <p>
        The textOverflow property specifies how text
        should be displayed when it overflows the
        container element.
    </p>
    <div class="content">
        GeeksforGeeks is a computer science portal with
        a huge variety of well written <br>explained
        computer science and programming articles,
        quizzes and interview questions. <br>The portal
        also has dedicated GATE preparation and
        competitive programming sections.
    </div>
    <button onclick="setOverflow()">
        Change textOverflow
    </button>
 
    <!-- Script to set textOverflow to initial -->
    <script>
        function setOverflow() {
            elem = document.querySelector('.content');
            elem.style.textOverflow = 'initial';
        }
    </script>
</body>
 
</html>

Output: 

Before clicking the button: 

initial-before 

After clicking the button:

 initial-after

  • inherit: It inherits the property from its parent element. 

Example: 

HTML




<!DOCTYPE html>
<html>
     
<head>
    <title>
        DOM Style textOverflow Property
    </title>
    <style>
        #parent {
            text-overflow: ellipsis;
        }
        .content {
            background-color: lightgreen;
            height: 100px;
            width: 300px;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <b>DOM Style textOverflow Property</b>
    <p>
        The textOverflow property specifies how text
        should be displayed when it overflows the
        container element.
    </p>
    <div id="parent">
        <div class="content">
            GeeksforGeeks is a computer science portal with
            a huge variety of well written <br>explained
            computer science and programming articles,
            quizzes and interview questions. <br>The portal
            also has dedicated GATE preparation and
            competitive programming sections.
        </div>
    </div>
    <button onclick="setOverflow()">
        Change textOverflow
    </button>
 
    <!-- Script to set textOverflow to inherit -->
    <script>
        function setOverflow() {
            elem = document.querySelector('.content');
            elem.style.textOverflow = 'inherit';
        }
    </script>
</body>
 
</html>

Output: 

Before clicking the button:

 inherit-before 

After clicking the button:

 inherit-after

Supported Browsers: The browser supported by textOverflow property are listed below:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Internet Explorer 6 and above
  • Firefox 7 and above 
  • Apple Safari 1.3 and above
  • Opera 11 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!