CSS text-overflow Property
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
.png)
