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:
<!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:
<!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:
<!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:
<!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