How to use text overflow property in CSS ?
Last Updated :
23 Apr, 2021
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:
