Как работает свойство white-space в HTML?

Свойство white-space в HTML указывает браузеру, как обрабатывать пробелы в тексте. doka.guide По умолчанию браузер игнорирует форматирование в HTML и ориентируется только на теги. doka.guide Он заменяет переносы строк, сделанные с помощью клавиши Enter, на пробелы, а несколько подряд идущих пробелов выводит как один. itchief.ru Текст, который не помещается в строку, переносится на следующую. itchief.ru

Некоторые значения свойства white-space и их действие:

• normal. doka.guide htmlacademy.ru Если в строке есть несколько подряд идущих пробелов, то браузер схлопывает их в один пробел. doka.guide Все переносы строк в HTML внутри тега также заменяются на пробел. doka.guide В итоге текст на странице переносится по пробелам, учитывая границы элемента. doka.guide
• nowrap. doka.guide Подряд идущие пробелы и переносы строк обрабатываются так же, как и с normal, но браузер перестаёт учитывать границы элемента и выводит весь текст в одну строку. doka.guide
• pre. doka.guide Сохраняется всё форматирование из HTML, включая переносы строк и последовательности пробелов. doka.guide
• pre-wrap. htmlbook.ru htmlacademy.ru В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку. htmlbook.ru
• pre-line. htmlbook.ru В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. htmlbook.ru
• break-spaces. itchief.ru htmlacademy.ru Похож на pre-wrap, но отличается от него алгоритмом разбивки пробелов в конце строки. itchief.ru

Принудительно организовать перенос текста вне зависимости от форматирования можно с использованием тега <br>. doka.guide Поведение текста при использовании этого тега одинаково при любых значениях свойства white-space. doka.guide