Разрыв слов

Normal

Используйте break-normal только для добавления разрывов строк в обычные точки разрыва слова.

Break Words

Используйте break-words для добавления разрывов строки в середине слова, если это необходимо.

Break All

Используйте break-all , чтобы при необходимости добавлять разрывы строк, не пытаясь сохранить целые слова.

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

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

<p class="break-normal md:break-all ...">
  <!-- ... -->
</p>

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

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

Варианты

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

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

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

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

Отключение

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

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