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"
Property Values:
- clip: It is used to clip the content if it overflows. It is the default value.
Example:
<!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
>
chevron_rightfilter_noneOutput:
Before clicking the button:
After clicking the button:
- ellipsis: It is used to shows ellipsis when the text overflows.
Example:
<!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 clip -->
<
script
>
function setOverflow() {
elem = document.querySelector('.content');
elem.style.textOverflow = 'ellipsis';
}
</
script
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
Before clicking the button:
After clicking the button:
- initial: It is used to set this property to its default value.
Example:
<!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 = 'initial';
}
</
script
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput:
Before clicking the button:
After clicking the button:
- inherit: It inherits the property from its parent element.
Example:<!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
>
chevron_rightfilter_noneOutput:
Before clicking the button:
After clicking the button:
Supported Browsers: The browser supported by textOverflow property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera