Limit text length to n lines using CSS

Using CSS, it is possible to limit the text length to N lines using CSS. This concept is known as line clamping or multiple line truncating. Here, we will learn how we can limit text length to n lines using the line-clamp property.
Submitted by Apurva Mathur, on May 25, 2022

The best solution to this problem is using the line-clamp property of CSS. The line-clamp property shortens text at a specific number of lines. It is defined as shorthand for max-lines and block-overflow.


.line {
  line-clamp: [none|<integer>];

The combination of line-clamp property with overflow-hidden value helps to limit the text length.

Lets us see via an example:


<!DOCTYPE html>
<html lang="en">
      <meta charset="UTF-8">
      .line {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1; /* number of lines to show */
      line-clamp: 1;
      -webkit-box-orient: vertical;
      background-color: #b3d4fc;
      <div class="block">
         <p class="line">You must be the change you wish to see in the world." - Gandhi. "Live for what's worth dying for, and leverage technology to create the world you wish to see</p>


Example 1: Limit text length to n lines

As we can see the text line is limited to 1 in the example. If we want to change this limit we can directly do it by changing the following values according to our preference.

-webkit-line-clamp: 5;
line-clamp: 5;

Output: After replacing the values in the code

Example 2: Limit text length to n lines

Note: -webkit-line-clamp, line-clamp the value which you are assigning should be the same for both.

CSS Tutorial & Examples »


Comments and Discussions!


Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© some rights reserved.