Set the limit of text length to N lines using CSS

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:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

  • 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:

    1. 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.
    2. It sometimes cuts off the last letters of the word hence it does not break on only spaces.
    3. 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    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;
    }
    
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.