Теория
Теория

Управляем пробелами: white-space

Это задание архивной части. Перейдите по ссылке, чтобы пройти задание в актуальной части.

Как вы уже знаете, браузер игнорирует множественные пробелы и переносы строк в HTML-коде. Изменить это поведение можно с помощью тега <pre>.

Однако, с помощью CSS управлять пробелами и переносами можно более гибко. За это отвечает свойство white-space, значения которого:

nowrap — отображает весь текст одной строкой без переносов;
pre — сохраняет пробелы и переносы как в исходном коде аналогично тегу <pre>;
pre-wrap — работает как значение pre, но добавляет автоматические переносы, если текст не помещается в контейнер;
normal — режим по умолчанию.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Управляем пробелами: white-space</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Так возник Progressive Enhancement</h1> <p class="nowrap">Короче говоря, такая халтура с отказоустойчивостью порядком надоела «правильным» разработчикам, надо было что-то делать.</p> <p class="like-pre"> Progressive Enhancement возник как реакция на плохой Graceful Degradation. Теперь действительно хорошие разработчики и дизайнеры могут делать Progressive Enhancement, а плохие не могут, так как это сложнее и трудозатратнее. Заодно новый подход впитал в себя все лучшие практики из Graceful Degradation. </p> </body> </html>

CSS

h1 { font-size: 24px; }

ЗадачиВыполнено

Проверьте, как свойство white-space влияет на отображение текста.

Заголовку задайте white-space: pre-wrap;.
Абзацу с классом nowrap задайте white-space: nowrap;.
Абзацу с классом like-pre задайте white-space: pre;.

Управляем пробелами: white-space

Вход

Регистрация

Восстановление доступа