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"> w3wiki </ 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"> w3wiki 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"> w3wiki </ 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"> w3wiki 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"> w3wiki </ 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"> w3wiki 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"> w3wiki </ 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"> w3wiki 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
Contact Us