CSS text-overflow Property
The text-overflow
property in CSS is your go-to feature when dealing with overflowing and hidden text. It works in tandem with the white-space
property set to nowrap and the overflow
property 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>
<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>w3wiki: A computer science portal for Beginner.</div>
</body>
</html>
Output:
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>
<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> w3wiki: A computer science portal for Beginner. </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>
<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> w3wiki: A computer science portal for Beginner. </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>
<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> w3wiki : A computer science portal for Beginner. </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>
<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> w3wiki: A computer science portal for Beginner.
<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