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: