Перенос текста

white-space

Свойство white-space управляет тем, как обрабатываются пробельные символы внутри элемента.

Интерактивный пример

Примечание: Для управления переносами внутри слов используйте overflow-wrap , word-break или hyphens .

Сводка

/* Ключевые значения */ white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; /* Глобальные значения */ white-space: inherit; white-space: initial; white-space: unset; 

Синтаксис

Свойство white-space определяется, как одно ключевое слово, выбранное из списка значений, указанных ниже.

Значения

Последовательности пробелов объединяются в один пробел. Символы новой строки в источнике обрабатываются, как отдельный пробел. Применение данного значения при необходимости разбивает строки для того, чтобы заполнить строчные боксы.

Объединяет последовательности пробелов в один пробел, как значение normal , но не переносит строки (оборачивание текста) внутри текста.

Последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы .

Последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы , и при необходимости для заполнения строчных боксов.

Последовательности пробелов объединяются в один пробел. Строки разбиваются по символам новой строки, по элементам , и при необходимости для заполнения строчных боксов..

Поведение идентично pre-wrap со следующими отличиями:

• Последовательности пробелов сохраняются так, как они указаны в источнике, включая пробелы на концах строк.
• Строки переносятся по любым пробелам, в том числе в середине последовательности пробелов.
• Пробелы занимают место и не висят на концах строк, а значит влияют на внутренние размеры (min-content и max-content).

В приведённой ниже таблице указано поведение различных значений свойства white-space :

Формальный синтаксис

white-space =
normal | (en-US)
pre | (en-US)
nowrap | (en-US)
pre-wrap | (en-US)
break-spaces | (en-US)
pre-line

Источник

Как сделать перенос строки?

Сделать перенос строки в желаемом месте текста можно несколькими путями. Рассмотрим несколько вариантов: через элемент , элемент и свойство white-space.

Использование

Первому
игроку
приготовиться

В примере 1 элемент
применяется для вывода стиха, где переносы строк выполняются определённым, задуманным автором образом.

Не знаю, о чём я тоскую.
Покоя душе моей нет.
Забыть ни на миг не могу я
Преданье далёких лет.

Генрих Гейне, Лорелея. Перевод Самуила Маршака

Использование

if a % 2 == 0: print('Чётное число') else: print('Нечётное число')

Текст внутри выводится моноширинным шрифтом, иными словами, каждая буква имеет одинаковую ширину. Это позволяет располагать символы друг под другом и с помощью пробелов легко выравнивать строки. Переносы текста, как и пробелы, внутри отображаются так же, как и в коде HTML, поэтому дополнительно вставлять какие-то элементы или ещё как-то обозначать перенос не требуется.

Использование свойства white-space

У свойства white-space есть несколько значений, дающих разные возможности, но нас интересует значение pre-line , которое учитывает только переносы текста и игнорирует идущие подряд пробелы (пример 3). Получается, что от взяли только переносы строк без учёта пробелов. Сам шрифт тоже не меняется на моноширинный.

Пример 3. Использование white-space

Переносы текста с участием стилевого свойства white-space дают нам дополнительные возможности, учитывающие ширину экрана. В частности, для широкого экрана переносы можно убрать, а для маленького экрана, наоборот, установить. В примере 4 с помощью медиа-запроса устанавливаем, что при уменьшении ширины окна добавятся переносы строк.

Пример 4. Перенос строк в зависимости от ширины

Здесь текст исходно выводится в одну строку и переносы добавляются браузером автоматически. При уменьшении ширины окна до 600 пикселей переносы возникают там, где мы их сделали в коде HTML.

См. также

Источник

Перенос строк в теге

Если вы установите ширину width: 100%, то получите горизонтальную прокрутку в IE7 — используйте width:99%. Также можете добавить тегу pre границу, цвет фона и отступы margin (внешний) и padding (внутренний). Не забудьте поправить их и для стилей печатной версии. У меня это выглядит так:

Стиль для переноса форматирования строк как в pre методом CSS:

Если хочется сделать свойства элемента pre для другого элемента (например для злосчастного ) вы должны использовать css свойство

figure> pre role="img" aria-label="ASCII COW"> ___________________________ < I'm an expert in my field. > --------------------------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || || pre> figcaption id="cow-caption"> A cow saying, "I'm an expert in my field." The cow is illustrated using preformatted text characters. figcaption> figure>