How to use text overflow property in CSS ?
In this article, we will see how to set text overflow property in CSS. The text-overflow property is used to specify that some text has overflown and hidden from view from the user. The text-overflow property only affects content that is overflowing a block container element.
Syntax:
text-overflow: clip| ellipsis
Property Value:
- clip: Text is clipped and cannot be seen. This is the default value.
- ellipsis: Text is clipped and the clipped text is represented as ‘…’ .
Note: The white-space Property in CSS is used to control the text wrapping and white-spacing which you will encounter in below examples.
Example 1: Using clip Property value.
HTML
<!DOCTYPE html><html> <head> <style> h1 { color: green; } .gfg { white-space: nowrap; width: 100%; overflow: hidden; text-overflow: clip; border: 1px solid #29bb89; } </style></head> <body> <h1>Welcome to GeeksforGeeks</h1> <h4>Text overflow: Clip</h4> <div class="gfg"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and Gate preparation Notes. </div></body> </html> |
Output:
Example 2: Using ellipsis property value.
HTML
<!DOCTYPE html><html> <head> <style> h1 { color: green; } .gfg { white-space: nowrap; width: 100%; overflow: hidden; text-overflow: ellipsis; border: 1px solid #29bb89; } .gfg1 { white-space: nowrap; width: 50px; overflow: hidden; text-overflow: ellipsis; border: 3px solid #29bb89; } </style></head> <body> <h1>Welcome to GeeksforGeeks</h1> <h4>Text overflow: ellipsis</h4> <div class="gfg"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and Gate preparation Notes. </div> <br> <div class="gfg1"> Aman Rathod</div></body> </html> |
Output:
.png)
.png)