Set the limit of text length to N lines using CSS

02 Jan, 2019
It is possible to limit the text length to  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>                    
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>                    
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.
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>                    
Picked
Technical Scripter 2018
CSS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS