HTML | DOM Style textOverflow Property
Last Updated :
08 Sep, 2022
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 >
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 >
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 >
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 >
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...