Display

Тип отображения (display)

Классы для управления свойством display и переполнением overflow.

Display классы

Основные классы

Класс	CSS свойство	Описание
.inline	display: inline	Строчный элемент
.block	display: block	Блочный элемент
.inline-block	display: inline-block	Строчно-блочный элемент
.table	display: table	Таблица
.table-cell	display: table-cell	Ячейка таблицы

Примеры

<!-- Строчный элемент -->
<span class="inline bg-primary-500 px-2 py-1">Inline</span>
<span class="inline bg-primary-500 px-2 py-1">Inline</span>

<!-- Блочный элемент -->
<div class="block bg-primary-500 p-2 mb-2">Block</div>
<div class="block bg-primary-500 p-2">Block</div>

<!-- Строчно-блочный -->
<button class="inline-block bg-primary-500 text-white px-4 py-2">
  Кнопка
</button>

Overflow классы

Управление переполнением

Класс	CSS свойство	Описание
.overflow-hidden	overflow: hide	Скрыть всё переполнение
.overflow-scroll	overflow: scroll	Всегда показывать скролл
.overflow-auto	overflow: auto	Автоматически при необходимости
.overflow-x-hide	overflow-x: hide	Скрыть горизонтальное
.overflow-y-hide	overflow-y: hide	Скрыть вертикальное
.overflow-x-scroll	overflow-x: scroll	Горизонтальный скролл
.overflow-y-scroll	overflow-y: scroll	Вертикальный скролл
.overflow-x-auto	overflow-x: auto	Авто горизонтальный
.overflow-y-auto	overflow-y: auto	Авто вертикальный

Примеры

<!-- Скрытие переполнения -->
<div class="overflow-hidden w-64 border">
  <p>Длинный текст, который не помещается в контейнер...</p>
</div>

<!-- Вертикальный скролл -->
<div class="overflow-y-auto h-48 border">
  <p>Много контента...</p>
  <p>Ещё контент...</p>
  <p>И ещё...</p>
</div>

<!-- Горизонтальный скролл -->
<div class="overflow-x-auto border">
  <div class="flex gap-4 min-w-fit p-4">
    <div class="w-32 h-32 bg-primary-100">1</div>
    <div class="w-32 h-32 bg-primary-100">2</div>
    <div class="w-32 h-32 bg-primary-100">3</div>
    <div class="w-32 h-32 bg-primary-100">4</div>
  </div>
</div>

Примеры использования

Модальное окно

<!-- Затемнение фона -->
<div class="fixed top-0 right-0 bottom-0 left-0 z-i-modal overflow-hidden bg-black bg-opacity-50 flex items-center justify-center">
  <!-- Модальное окно -->
  <div class="bg-white rounded-lg p-6 max-w-128 mx-4 max-h-80vh overflow-y-auto">
    <h2 class="text-xl font-bold mb-4">Заголовок</h2>
    <p class="text-gray-600 mb-6">
      Длинный контент модального окна, который может прокручиваться...
    </p>
    <button class="bg-primary-500 text-white px-4 py-2 rounded">
      Закрыть
    </button>
  </div>
</div>

Текст с обрезкой и многоточием

<!-- Обрезка с многоточием -->
<div class="w-64 overflow-hidden nowrap text-ellipsis border">
  Очень длинный текст, который будет обрезан и заменён многоточием...
</div>

<!-- Многострочная обрезка -->
<div class="w-64 overflow-hidden truncate border">
  Текст, который будет обрезан после трёх строк с многоточием в конце...
</div>

Табличная вёрстка

<!-- Таблица -->
<div class="table w-full border">
  <div class="flex w-full bg-gray-50">
    <div class="table-cell border p-2 font-bold">Заголовок 1</div>
    <div class="table-cell border p-2 font-bold">Заголовок 2</div>
    <div class="table-cell border p-2 font-bold">Заголовок 3</div>
  </div>
  <div class="flex w-full">
    <div class="table-cell border p-2">Ячейка 1</div>
    <div class="table-cell border p-2">Ячейка 2</div>
    <div class="table-cell border p-2">Ячейка 3</div>
  </div>
</div>

Карусель/слайдер

<!-- Горизонтальная прокрутка -->
<div class="overflow-x-auto nowrap pb-4">
  <div class="inline-block w-48 h-64 bg-primary-100 m-2 rounded-lg"></div>
  <div class="inline-block w-48 h-64 bg-primary-100 m-2 rounded-lg"></div>
  <div class="inline-block w-48 h-64 bg-primary-100 m-2 rounded-lg"></div>
  <div class="inline-block w-48 h-64 bg-primary-100 m-2 rounded-lg"></div>
  <div class="inline-block w-48 h-64 bg-primary-100 m-2 rounded-lg"></div>
</div>

Сайдбар с прокруткой

<div class="flex h-screen">
  <!-- Сайдбар -->
  <aside class="w-64 bg-white border-r overflow-y-auto">
    <nav class="p-4">
      <a href="#" class="block py-2 hover:bg-gray-50">Пункт 1</a>
      <a href="#" class="block py-2 hover:bg-gray-50">Пункт 2</a>
      <a href="#" class="block py-2 hover:bg-gray-50">Пункт 3</a>
      <!-- Много пунктов -->
    </nav>
  </aside>

  <!-- Основной контент -->
  <main class="flex-1 overflow-y-auto p-8">
    <h1 class="text-2xl font-bold mb-4">Заголовок</h1>
    <p>Основной контент страницы...</p>
  </main>
</div>

Выпадающее меню

<div class="relative inline-block">
  <!-- Кнопка -->
  <button class="bg-primary-500 text-white px-4 py-2 rounded">
    Меню
  </button>

  <!-- Выпадающий список -->
  <div class="absolute left-0 mt-2 w-48 bg-white border rounded-lg overflow-hidden z-i-menu">
    <a href="#" class="block px-4 py-2 hover:bg-gray-50">Пункт 1</a>
    <a href="#" class="block px-4 py-2 hover:bg-gray-50">Пункт 2</a>
    <a href="#" class="block px-4 py-2 hover:bg-gray-50">Пункт 3</a>
  </div>
</div>

Таблица классов

Display

Класс	CSS
.inline	display: inline
.block	display: block
.inline-block	display: inline-block
.table	display: table
.table-cell	display: table-cell

Overflow

Класс	CSS
.overflow-hidden	overflow: hide
.overflow-scroll	overflow: scroll
.overflow-auto	overflow: auto
.overflow-x-hide	overflow-x: hide
.overflow-y-hide	overflow-y: hide
.overflow-x-scroll	overflow-x: scroll
.overflow-y-scroll	overflow-y: scroll
.overflow-x-auto	overflow-x: auto
.overflow-y-auto	overflow-y: auto

См. также

• Скролл — для стилизации скроллбара
• Скрытие — для скрытия элементов на брейкпоинтах
• Позиционирование — для позиционирования элементов