Классы задают свойство white-space: сливаются ли подряд идущие пробелы,
сохраняются ли переводы строк из разметки и переносится ли строка по ширине
блока. Берите их для адресов, стихов, кода и текста, введённого
пользователем.
Пример
В разметке каждого образца — одинаковый текст с лишними пробелами, переводом
строки и отступом второй строки.
HTML
<divclass="grid grid-col-1 sm:grid-col-2 gap-3 color-on-surface">
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">whitespace-normal</code>
<pclass="m-0 p-2 text-2 border border-dashed border-outline radius-ui overflow-hidden whitespace-normal">Строка с несколькими пробелами
и строка с отступом, достаточно длинная, чтобы не поместиться в рамку</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">wrap-none</code>
<pclass="m-0 p-2 text-2 border border-dashed border-outline radius-ui overflow-hidden wrap-none">Строка с несколькими пробелами
и строка с отступом, достаточно длинная, чтобы не поместиться в рамку</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">pre</code>
<pclass="m-0 p-2 text-2 border border-dashed border-outline radius-ui overflow-hidden pre">Строка с несколькими пробелами
и строка с отступом, достаточно длинная, чтобы не поместиться в рамку</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">pre-line</code>
<pclass="m-0 p-2 text-2 border border-dashed border-outline radius-ui overflow-hidden pre-line">Строка с несколькими пробелами
и строка с отступом, достаточно длинная, чтобы не поместиться в рамку</p>
</div>
<divclass="flex flex-col gap-1">
<codeclass="text-1/2 color-on-surface-variant">pre-wrap</code>
<pclass="m-0 p-2 text-2 border border-dashed border-outline radius-ui overflow-hidden pre-wrap">Строка с несколькими пробелами
и строка с отступом, достаточно длинная, чтобы не поместиться в рамку</p>
</div>
</div>
Классы
Класс
CSS
Значения
wrap-none
white-space: nowrap
—
pre
white-space: pre
—
pre-line
white-space: pre-line
—
pre-wrap
white-space: pre-wrap
—
whitespace-normal
white-space: normal
—
Условия (что это): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Класс
Пробелы
Переводы строк
Перенос по ширине
whitespace-normal
сливаются
становятся пробелом
есть
wrap-none
сливаются
становятся пробелом
нет
pre
сохраняются
сохраняются
нет
pre-line
сливаются
сохраняются
есть
pre-wrap
сохраняются
сохраняются
есть
Текст, который ввёл пользователь — комментарий, адрес, — показывайте с
pre-line или pre-wrap, чтобы сохранить его переводы строк:
HTML
<pclass="pre-line">{{ comment }}</p>
Ограничения
wrap-none и pre не переносят строку: длинная строка выходит за блок.
Добавьте прокрутку overflow-auto или обрезку truncate.
Отступы в начале строк в разметке тоже сохраняются у pre и pre-wrap:
начинайте текст с начала строки.
У семейства нет префиксов ширины экрана и состояний.
