Утилиты для управления свойством пустого пространства элемента.
Используйте whitespace-normal, чтобы нормально переносить текст внутри элемента. Новые строки и пробелы будут свернуты.
<div class="w-3/4 ...">
<div class="whitespace-normal ...">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
eum natus enim maxime
laudantium quibusdam illo nihil,
reprehenderit saepe quam aliquid odio accusamus.</div>
</div>Используйте whitespace-nowrap, чтобы предотвратить перенос текста внутри элемента. Новые строки и пробелы будут свернуты.
<div class="w-3/4 overflow-x-auto ...">
<div class="whitespace-nowrap ...">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
eum natus enim maxime
laudantium quibusdam illo nihil,
reprehenderit saepe quam aliquid odio accusamus.</div>
</div>Используйте whitespace-pre, чтобы сохранить символы новой строки и пробелы внутри элемента. Текст не переносится.
<div class="w-3/4 overflow-x-auto ...">
<div class="whitespace-pre ...">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
eum natus enim maxime
laudantium quibusdam illo nihil,
reprehenderit saepe quam aliquid odio accusamus.</div>
</div>Use whitespace-pre-line to preserve newlines but not spaces within an element. Text will be wrapped normally.
<div class="w-3/4 ...">
<div class="whitespace-pre-line ...">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
eum natus enim maxime
laudantium quibusdam illo nihil,
reprehenderit saepe quam aliquid odio accusamus.</div>
</div>Use whitespace-pre-wrap to preserve newlines and spaces within an element. Text will be wrapped normally.
<div class="w-3/4 ...">
<div class="whitespace-pre-wrap ...">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem tenetur quia iure,
eum natus enim maxime
laudantium quibusdam illo nihil,
reprehenderit saepe quam aliquid odio accusamus.</div>
</div>Чтобы управлять свойством пробела элемента только в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите пробелов. Например, добавление класса md:whitespace-pre к элементу приведет к применению утилиты whitespace-pre при средних размерах экрана и выше.
<div class="whitespace-normal md:whitespace-pre ...">
<!-- ... -->
</div>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
По умолчанию, только responsive варианты создаются для утилит whitespace.
Вы можете контролировать, какие варианты создаются для утилит whitespace для изменения свойства whitespace в разделе variants Вашего файла конфигурации tailwind.config.js.
Например, эта конфигурация также будет генерировать варианты hover и focus:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ whitespace: ['hover', 'focus'],
}
}
}Если Вы не планируете использовать в своем проекте утилиты для изменения whitespace, Вы можете полностью отключить их, установив для whitespace свойство значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ whitespace: false,
}
}