Set the limit of text length to N lines using CSS

Last Updated : 02 Jan, 2019

It is possible to limit the text length to $N$ lines using CSS. This is known as line clamping or multiple line truncating. There can be two possible cases:

Truncating text after 1 line: If you need to truncate text after 1 line then the text-overflow property of CSS can be used. It creates ellipses and gracefully cut off words.

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

The below code demonstrates text-overflow property of CSS:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
        
    <style> 
        .text{ 
            white-space: nowrap;  
            overflow: hidden; 
            text-overflow: ellipsis; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="text"> 
        Hello GeeksforGeeks. A Computer Science portal for geeks. 
        It contains well written, well thought articles.  
        This is a paragraph containing multiple lines. 
    </div> 
</body> 
</html>                     

Truncating text after more than 1 line: If you need to truncate text after more than 1 line then you will have to use WebKit. Webkit is the html/css rendering engine used in Apple’s Safari browser, and in Google’s Chrome. The various problems with using WebKit are:

WebKit is supported only in some browsers. It is supported only by Google chrome and Apple’s Safari browser and is not supported by Internet Explorer, Microsoft Edge, Firefox or Opera Mini.
It sometimes cuts off the last letters of the word hence it does not break on only spaces.
In WebKit there is No Alternate to Ellipsis i.e. you cannot use anything besides ellipses at the end of the truncated line.

.text{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 16px;    
    max-height: 32px;     
    -webkit-line-clamp: 2; /* Write the number of 
                              lines you want to be 
                              displayed */
    -webkit-box-orient: vertical;
}

The below code demonstrates truncating of N lines using WebKit:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
          
    <style> 
        .text{ 
            overflow: hidden; 
            text-overflow: ellipsis; 
            display: -webkit-box; 
            line-height: 16px;  
            max-height: 32px;      
              
            /* The number of lines to be displayed */ 
            -webkit-line-clamp: 2;  
            -webkit-box-orient: vertical; 
        } 
    </style>     
</head> 
  
<body> 
    <div class="text"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
        sed do eiusmod tempor incididunt ut labore et dolore  
        magna aliqua. Ut enim ad minim veniam, quis nostrud  
        exercitation ullamco laboris nisi ut aliquip ex ea  
        commodo consequat. Duis aute irure dolor in reprehenderit  
        in voluptate velit esse cillum dolore eu fugiat nulla  
        pariatur. Excepteur sint occaecat cupidatat non proident,  
        sunt in culpa qui officia deserunt mollit anim id est  
        laborum.Lorem ipsum dolor sit amet, consectetur adipisicing  
        elit, sed do eiusmod tempor incididunt ut labore et dolore  
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation  
        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis  
        aute irure dolor in reprehenderit in voluptate velit esse  
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  
        cupidatat non proident, sunt in culpa qui officia deserunt  
        mollit anim id est laborum. 
    </div> 
</body> 
</html>                     

The Opera Web Browser has its own way to handle this situation. It applies ellipsis on the line after which the text is truncated.

.text{
    overflow: hidden;
    white-space: normal;
    height: 1.2em; /* exactly 2 lines */
    text-overflow: -o-ellipsis-lastline;
}

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style> 
        .text{ 
            overflow: hidden; 
            white-space: normal; 
              
            /* Exactly 2 lines are displayed.  
                Height of 1 line is 1.2em*/ 
            height: 2.4em;  
            text-overflow: -o-ellipsis-lastline; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="text"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
        sed do eiusmod tempor incididunt ut labore et dolore magna  
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
        ullamco laboris nisi ut aliquip ex ea commodo consequat.  
        Duis aute irure dolor in reprehenderit in voluptate velit  
        esse cillum dolore eu fugiat nulla pariatur. Excepteur  
        sint occaecat cupidatat non proident, sunt in culpa qui  
        officia deserunt mollit anim id est laborum.Lorem ipsum  
        dolor sit amet, consectetur adipisicing elit, sed do  
        eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        t enim ad minim veniam, quis nostrud exercitation ullamco  
        laboris nisi ut aliquip ex ea commodo consequat. Duis aute  
        irure dolor in reprehenderit in voluptate velit esse cillum  
        dolore eu fugiat nulla pariatur. Excepteur sint occaecat  
        cupidatat non proident, sunt in culpa qui officia deserunt  
        mollit anim id est laborum. 
    </div> 
</body> 
</html>                     

Suggest improvement

How to set the Text Color of HTML Element using CSS?

Share your thoughts in the comments

Set the limit of text length to N lines using CSS

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?