Open In App

How to use text overflow property in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 23 Apr, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads