Оформление текста, часть 1 / Управляем пробелами: white-space [10/16]
×

Управляем пробелами: white-space [10/16]

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

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

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

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Управляем пробелами: white-space</title> </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; }
HTML Academy

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

  1. Заголовку задайте white-space: pre-wrap;.
  2. Абзацу с классом nowrap задайте white-space: nowrap;.
  3. Абзацу с классом like-pre задайте white-space: pre;.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.