Переполнение текста

Обрезка

При необходимости используйте truncate, чтобы обрезать переполняющий текст многоточием (…).

Многоточие за переполнение

При необходимости используйте overflow-ellipsis, чтобы обрезать переполняющий текст многоточием (…).

Зажим переполнения

Используйте overflow-clip, чтобы обрезать текст до предела области содержимого.

Адаптивность

Чтобы управлять переполнением текста в элементе только в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите переполнения текста. Например, добавление класса md:overflow-clip к элементу приведет к применению утилиты overflow-clip при средних размерах экрана и выше.

<p class="truncate md:overflow-clip ...">
  <!-- ... -->
</p>

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

Варианты

По умолчанию, только responsive варианты создаются для утилит text overflow.

Вы можете контролировать, какие варианты создаются для утилит text overflow для изменения свойства textOverflow в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       textOverflow: ['hover', 'focus'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения text overflow, Вы можете полностью отключить их, установив для textOverflow свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     textOverflow: false,
    }
  }