Узнайте, как использовать служебный класс truncate в CSS Tailwind для создания адаптивных текстовых элементов, подходящих для любого размера экрана. Включает фрагменты кода и живые демонстрации.
Tailwind CSS усекает текст на одну строку.
<p class="line-clamp-1 max-w-xs">It is a long established fact that a reader will be distracted by</p>
Вы можете использовать усечение CSS попутного ветра line-clamp-1, line-clamp-2, line-clamp-3, line-clamp-4, line-clamp-5, line-clamp-6 класс.
Tailwind CSS реагирует на усечение текста строки.
<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>
CSS при наведении попутного ветра усекает текст строки.
<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 создать карточку с усеченным текстом строки.
<!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>