Как обрезать текст в Tailwind CSS (с примерами)

Узнайте, как использовать служебный класс 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 попутного ветра обрезать текст на одну строку

Вы можете использовать усечение 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>

CSS усечь текст строки попутного ветра с карточкой

#tailwindcss