Tailwind CSS - Line Clamp

Previous
Quiz
Next

Tailwind CSS Line Clamp is a utility class that restricts the length of text lines by adding an ellipsis (...) when the text exceeds the specified limit.

Tailwind CSS Line Clamp Classes

Below is a list of Tailwind CSS Line Clamp classes that provide methods to control the visibility of text lines and prevent overflow content.

Class Properties
line-clamp-1 overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-clamp-2 overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp-3 overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp-4 overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp-5 overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
line-clamp-6 overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
line-clamp-none overflow: visible;
display: block;
-webkit-box-orient: horizontal;
-webkit-line-clamp: none;

Functionality Of Tailwind CSS Line Clamp Classes

  • line-clamp-1: This class limits the text content to display within one line.
  • line-clamp-2: This class limits the text content to display within two lines.
  • line-clamp-3: This class limits the text content to display within three lines.
  • line-clamp-4: This class limits the text content to display within four lines.
  • line-clamp-5: This class limits the text content to display within five lines.
  • line-clamp-6: This class limits the text content to display within six lines.
  • line-clamp-none: This class allows the text content to display without any line limitation.

Tailwind CSS Line Clamp Class Examples

Below are examples of Tailwind CSS line clamp classes that limit the display of text content to a specific number of lines.

Truncating multi-line Text

This example shows how the Tailwind CSS line clamp classes use 'line-clamp-*' utilities to limit the display of text content to a defined number of lines, ensuring it fits within allocated space limits.

Example

<!DOCTYPE html>
<html lang="en">
<head> 
     <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Line Clamp
    </h1> 
    <p class="line-clamp-1 mb-4">
        <strong>line-clamp-1:</strong> 
        Mockingbird! Yeah, I know sometimes things may 
        not always make sense to you right now, but hey!
        What does Daddy always tell you? Straighten up,
        little soldier. Stiffen up that upper lip. What're 
        you crying' about? You got me!
    </p>
    <p class="line-clamp-2 mb-4">
        <strong>line-clamp-2:</strong>
        Mockingbird! Yeah, I know sometimes things may 
        not always make sense to you right now, but hey!
        What does Daddy always tell you? Straighten up,
        little soldier. Stiffen up that upper lip. What're 
        you crying' about? You got me!
    </p>
</body>

</html>

Revoke Truncating multi-line Text on Hover

This example shows how the Tailwind CSS line clamp classes use 'line-clamp-*' utilities to limit the display of text content to a defined number of lines, and on hover how line-clamp got revoked.

Example

<!DOCTYPE html>
<html lang="en">
<head> 
     <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Line Clamp
    </h1> 
    <p class="line-clamp-1 hover:line-clamp-none mb-4">
        <strong>Hover On Text:</strong> 
        Mockingbird! Yeah, I know sometimes things may 
        not always make sense to you right now, but hey!
        What does Daddy always tell you? Straighten up,
        little soldier. Stiffen up that upper lip. What're 
        you crying' about? You got me!
    </p>
    <p class="line-clamp-2 hover:line-clamp-none mb-4">
        <strong>Hover On Text:</strong>
        Mockingbird! Yeah, I know sometimes things may 
        not always make sense to you right now, but hey!
        What does Daddy always tell you? Straighten up,
        little soldier. Stiffen up that upper lip. What're 
        you crying' about? You got me!
    </p>
</body>

</html>

Note: Classes like line-clamp-3 and higher will behave similarly to line-clamp-2 in limiting the visible lines of text due to limitations in some browsers.

Print Page
Previous
Next