The CSS text-overflow property sets the information to display and hides other tag information. If the data overflows from the tags, then css uses the text overflow property to hide extra characters. The white-space character sets the now-wrap property value, and text-overflow sets the hidden property. The overflowing content sets the data in clipped, ellipsis string and another format.
Syntax
The CSS text-overflow property is demonstrated below along with its various options.
<style>
Element {
text-overflow: clip/ellipsis/string/initial/inherit;
}
</style>
Supported Browsers
The browsers supported by css text overflow are given below:
- Google Chrome
- Edge
- Firefox
- Internet Explorer
- Opera
- Safari
CSS Text-overflow Clip Format
The clip is the initial value of the text-overflow property. It assists in truncating overflowing content and displaying the visible portion.
Syntax
The syntax below demonstrates text-overflow using the clip value.
<style>
Element {
text-overflow: clip;
}
</style>
Example:
The example demonstrates the fundamental text-overflow with the clip setting for content. This represents the default configuration of the text-overflow property.
<!DOCTYPE html>
<html>
<head>
<title> CSS text-overflow Property </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show basic CSS text-overflow*/
div.clip {
white-space: nowrap;
width: 60px;
overflow: hidden;
text-overflow: clip;
border: 1px solid #000000;
margin-left:10px;
}
div.clip2 {
white-space: nowrap;
width: 70px;
overflow: hidden;
text-overflow: clip;
border: 1px solid #000000;
margin-left:10px;
}
.main_div {
background-color: #F4F2F2;
height:200px;
width: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS text-overflow Property </h2>
<b> We can see the text in the tag with clip value </b>
<div class = "clip"> Hello Students! </div>
<br>
<div class = "clip2"> Hello Students! </div>
</div>
</body>
</html>
Output
The result displays the text-overflow attribute along with information.
CSS Text-overflow Ellipsis Format
The ellipsis property conceals information while displaying a series of dots to represent the hidden content. The obscured data is depicted using the "…" symbol repeated three times in a dot pattern.
Syntax
The syntax below demonstrates the text-overflow using the ellipsis setting.
<style>
Element {
text-overflow: ellipsis;
}
</style>
Example:
The sample demonstrates the fundamental text-overflow method for displaying data in an ellipsis format.
<!DOCTYPE html>
<html>
<head>
<title> CSS text-overflow Property </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
div.clip {
white-space: nowrap;
width: 60px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
margin-left:10px;
}
.main_div {
background-color: #F4F2F2;
height:200px;
width: 300px;
border : 2px solid grey;
}
div.clip2 {
white-space: nowrap;
width: 70px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
margin-left:10px;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS text-overflow Property </h2>
<b> We can see the text property in the tag with ellipsis format </b>
<div class = "clip"> Hello Students! </div>
<br>
<div class = "clip2"> Hello Students! </div>
</div>
</body>
</html>
Output
The result displays the text-overflow property along with data.
CSS Text-overflow Initial Format
The default setting truncates the information and conceals any obscured data.
Syntax
The provided syntax demonstrates the text-overflow property set to its initial value.
<style>
Element {
text-overflow: initial;
}
</style>
Example:
The sample demonstrates the fundamental text-overflow for the original layout of the information.
<!DOCTYPE html>
<html>
<head>
<title> CSS text-overflow Property </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
div.clip {
white-space: nowrap;
width: 60px;
overflow: hidden;
text-overflow: initial;
border: 1px solid #000000;
margin-left:10px;
}
.main_div {
background-color: #F4F2F2;
height:200px;
width: 300px;
border : 2px solid grey;
}
div.clip2 {
white-space: nowrap;
width: 70px;
overflow: hidden;
text-overflow: initial;
border: 1px solid #000000;
margin-left:10px;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS text-overflow Property </h2>
<b> We can see the property for the tag with the initial format </b>
<div class = "clip"> Hello Students! </div>
<br>
<div class = "clip2"> Hello Students! </div>
</div>
</body>
</html>
Output
The result displays the text-overflow property along with the data.
CSS Text-overflow Inherits Format
The text-overflow attribute passes down the style to truncate overflowing content, aligning with the parent element's specifications. In cases where the property is inherited from the parent element, it adopts the inherit style.
Syntax
The provided syntax demonstrates the text-overflow property utilizing the inherited value.
Element {
text-overflow: inherit;
}
Example:
The illustration demonstrates the fundamental text-overflow behavior for the inherited data format. Concealed content is indicated by the "…" symbol repeated three times.
<!DOCTYPE html>
<html>
<head>
<title> CSS text-overflow Property </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<style>
.main_div {
background-color: #F4F2F2;
height: 180px;
width: 310px;
border : 2px solid grey;
}
section {
width: 200px;
font-size: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
h6 {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: inherit;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS text-overflow Property </h2>
<b> We can see the property for the tag with inherit format </b>
<section> C# Tutorial: A programming learning platform.
<h6>
CSS text-overflow property is included inside the section tag.
</h6>
</section>
</div>
</body>
</html>
Output
The result demonstrates the text-overflow attribute with information.
CSS Text-overflow String Format
The text-overflow attribute is employed in text format to truncate the content. It allows us to conceal excess information within the text.
Syntax
The syntax provided demonstrates the text-overflow using a string value.
Element {
text-overflow: string;
}
Example:
The illustration demonstrates the fundamental text-overflow behavior for formatting string data. Users have the option to define the string according to their preferred format or leave it blank.
<!DOCTYPE html>
<html>
<head>
<title> CSS text-overflow Property </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
div.clip {
white-space: nowrap;
width: 60px;
overflow: hidden;
text-overflow: " ";
border: 1px solid #000000;
margin-left:10px;
}
.main_div {
background-color: #F4F2F2;
height: 180px;
width: 310px;
border : 2px solid grey;
}
div.clip2 {
white-space: nowrap;
width: 70px;
overflow: hidden;
text-overflow: "string";
border: 1px solid #000000;
margin-left:10px;
}
</style>
</head>
<body>
<div class = "main_div">
<h2> CSS text-overflow Property </h2>
<b> We can see the property for the tag with string format </b>
<br>
<div class = "clip"> Hello Students! </div>
<br>
<div class = "clip2"> Hello Students! </div>
</div>
</body>
</html>
Output
The result demonstrates the text-overflow attribute along with relevant data.
Conclusion
The text-overflow attribute presents content in a compact manner while concealing surplus data. This CSS feature is applied within tables, forms, and various pages containing database-related content.