In this tutorial we will see how to use truncate line text in tailwind css. Also we will see line clamp, responsive truncate line text, hover truncate line text example with Tailwind CSS.
Examples
tailwind css one line truncate text.
<p class="line-clamp-1 max-w-xs">It is a long established fact that a reader will be distracted by</p>
tailwind css one line truncate text
You can use tailwind css truncate line-clamp-1, line-clamp-2, line-clamp-3, line-clamp-4, line-clamp-5, line-clamp-6 class.
tailwind css responsive truncate line text.
<p class="line-clamp-1 lg:line-clamp-none max-w-xs">It is a long established fact that a reader will be distracted by</p>
tailwind css hover truncate line text.
<p class="line-clamp-1 hover:line-clamp-none max-w-xs">It is a long established fact that a reader will be distracted by</p>
tailwind css create card with truncate line text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Truncate Line Text Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex flex-col items-center justify-center h-screen">
<article class="max-w-sm shadow-md p-4">
<time>Mar 10, 2023</time>
<h2 class="font-bold text-xl">Boost your conversion rate</h2>
<p class="line-clamp-3">It is a long established fact that a reader will be distracted by the readable content of
a page when looking at its layout. The point of using Lorem </p>
<button class="px-2 py-1 text-sm bg-blue-600 text-white rounded">Read More</button>
</article>
</div>
</body>
</html>
tailwind css truncate line text with card
