How to Apply an Ellipsis to Multiline Text in CSS ?

Last Updated : 19 May, 2023

In this article, we will see how to apply an ellipsis to multi-line text which can be done using two approaches.

Ellipsis refers to three dots and it is the most user-friendly UI modification that lets the user know that there was some more information that is being truncated due to lack of space.

Approach:

By default, the white-space: nowrap and overflow: hidden are absolutely necessary as the first one is responsible to hold all the text in one line and the second one hides what overflows.
Now if you want to have the ellipsis after two or three lines then you have to use either use display: -webkit-box layout mode or display: -moz-box mode and this approach is shown in the second example.

Syntax:

selector {    
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

Used Properties:

text-overflow: This property is used to add the ellipsis at the end of the truncated part by setting its own value to “ellipsis”.
white-space: This property is used to accumulate all the white space into one and does not let the line go to the next one, by setting its value to “nowrap”.
overflow: This property is used to hide the overflow of the text outside the container.

Example 1: The code below demonstrates how we can apply the first approach which is the default way of implementing the ellipsis.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Applying an ellipsis to multiline text 
    </title> 
    <style> 
        .container { 
            width: 35rem; 
            height: 12rem; 
            padding: 1rem; 
            margin: 5rem; 
            padding-bottom: 5rem; 
            background-color: lightgreen; 
        } 
          
        .text { 
            white-space: nowrap; 
            overflow: hidden; 
            text-overflow: ellipsis; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green"> 
        GeeksforGeeks 
    </h1> 
    <h3> 
        Applying an ellipsis to multiline text 
    </h3>     
    <div class="container"> 
        <div class="text"> 
            This is a card and this one truncates  
            only uptill one line which is the default  
            truncation of ellipsis. 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: The code below demonstrates how we can apply the second approach where we will use display: -webkit-box layout mode of implementing the ellipsis after multiple lines:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Applying an ellipsis to multiline text 
    </title> 
    <style> 
        .box{ 
            display: flex; 
            flex-direction: row; 
        } 
        .container { 
            width: 12rem; 
            height: 12rem; 
            padding: 1rem; 
            margin: 3rem; 
            padding-bottom: 5rem; 
            background-color: lightgreen; 
        } 
          
        .text-2 { 
            display: -webkit-box; 
            -webkit-box-orient: vertical; 
            -webkit-line-clamp: 2; 
            overflow: hidden; 
            text-overflow: ellipsis; 
        } 
        .text-3 { 
            display: -webkit-box; 
            -webkit-box-orient: vertical; 
            -webkit-line-clamp: 3; 
            overflow: hidden; 
            text-overflow: ellipsis; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green"> 
        GeeksforGeeks 
    </h1> 
    <h3> 
          Applying an ellipsis to multiline text 
      </h3>     
    <div class="box"> 
        <div class="container"> 
            <div class="text-2"> 
                This is the first card and this one  
                and this one truncates upto two lines. 
            </div> 
        </div> 
        <div class="container"> 
            <div class="text-3"> 
                This is the first card and this one  
                and this one truncates upto three  
                lines. 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>