Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS Line Clamp Text</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="antialiased"> <div class="bg-slate-50 dark:bg-slate-900 min-h-screen p-8 flex items-center justify-center"> <div class="max-w-3xl grid grid-cols-1 md:grid-cols-2 gap-8"> <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 border border-slate-100 dark:border-slate-700"> <div class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400 mb-4"> line-clamp-2 </div> <h3 class="text-xl font-bold text-slate-800 dark:text-white mb-2">Two Line Clamping</h3> <p class="text-slate-600 dark:text-slate-400 line-clamp-2">This paragraph uses the line-clamp-2 utility which restricts the text to exactly two lines. If the content exceeds this limit, it will automatically be truncated with an ellipsis at the very end of the second line, making it perfect for article previews and card descriptions where vertical rhythm is strictly maintained.</p> <a href="#" class="inline-block mt-4 text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:underline">Read full article →</a> </div> <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm p-6 border border-slate-100 dark:border-slate-700"> <div class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-rose-100 text-rose-800 dark:bg-rose-900/30 dark:text-rose-400 mb-4"> line-clamp-4 </div> <h3 class="text-xl font-bold text-slate-800 dark:text-white mb-2">Four Line Clamping</h3> <p class="text-slate-600 dark:text-slate-400 line-clamp-4">This paragraph uses the line-clamp-4 utility instead. It allows up to four lines of text to be displayed before truncating with an ellipsis. This is very useful when you have a bit more space or want to provide a more substantial preview of the content before forcing the user to click through to read the rest. It provides a balanced reading experience for blog summaries.</p> </div> </div> </div> </body> </html>
