A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis (‘…’), or display a custom string.
Syntax:
text-overflow: clip|string|ellipsis|initial|inherit;
Property Values: All the properties are described well with the example below.
clip: Text is clipped and cannot be seen. This is the default value.
Syntax:
text-overflow: clip;
Example: This example illustrates the use of the text-overflow property where its value is set to clip.
HTML
<html>
<head>
<title> CSS | text-overflow Property </title>
<style type="text/css">
div {
width: 500px;
font-size: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
</style>
</head>
<body>
<div>GeeksforGeeks: A computer science portal for geeks.</div>
</body>
</html>
|
Output:
CSS text-overflow_clip
ellipsis: Text is clipped and the clipped text is represented as ‘…’.
Syntax:
text-overflow: ellipsis;
Example: This example illustrates the use of the text-overflow property where its value is set to ellipsis.
HTML
<html>
<head>
<title> CSS | text-overflow Property </title>
<style type="text/css">
div {
width: 500px;
font-size: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div> GeeksforGeeks: A computer science portal for geeks. </div>
</body>
</html>
|
Output:
string: The clipped text is represented to the user using a string of the coder’s choice. This option is only visible in the Firefox browser.
Syntax:
text-overflow: string;
where a string is defined by the developer.
Example: This example illustrates the use of the text-overflow property where its value is set to a specific string value.
HTML
<html>
<head>
<title> CSS | text-overflow Property </title>
<style type="text/css">
div {
width: 500px;
font-size: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: " ";
}
</style>
</head>
<body>
<div> GeeksforGeeks: A computer science portal for geeks. </div>
</body>
</html>
|
Output:
initial: It is used to set an element’s CSS property to its default value ie., this value will set the text-overflow property to its default value.
Syntax:
text-overflow: initial;
Example: This example illustrates the use of the text-overflow property where its value is set to initial.
HTML
<html>
<head>
<title> CSS | text-overflow Property </title>
<style type="text/css">
div {
width: 500px;
font-size: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: initial;
}
</style>
</head>
<body>
<div> GeeksforGeeks : A computer science portal for geeks. </div>
</body>
</html>
|
Output:
inherit: It is used to inherit a property to an element from its parent element property value ie., the value will set the text-overflow property to the value of the parent element.
Syntax:
text-overflow: inherit;
Example: This example illustrates the use of the text-overflow property where its value is set to inherit.
HTML
<html>
<head>
<title> CSS | text-overflow Property </title>
<style type="text/css">
div {
width: 500px;
font-size: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
h3 {
width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow: inherit;
}
</style>
</head>
<body>
<div> GeeksforGeeks: A computer science portal for geeks.
<h3>
I have inherited my overflow property from div.
</h3>
</div>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by the text-overflow property are listed below:
- Chrome 1.0
- Firefox 7.0
- Microsoft Edge 12.0
- IE 6.0
- Safari 1.3
- Opera 11.0
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!