HTML | DOM Style textOverflow Property
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:
After clicking the button:
- 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:
After clicking the button:
- 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:
After clicking the button:
- 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:
After clicking the button:
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
.png)
