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:
