Управление пробелами (white-space): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Эта серия заданий посвящена свойству CSS `white-space`. Вы научитесь управлять тем, как браузер обрабатывает пробелы, переносы строк и табуляцию в HTML-коде. Задания помогут понять разницу между значениями `normal`, `nowrap`, `pre`, `pre-wrap`, `pre-line` и `break-spaces`, а также отработать их применение на практике для форматирования текста.

Список тем

Предотвращение переноса текста

В этом задании есть короткий абзац текста. Ваша задача - изменить CSS таким образом, чтобы весь текст отображался в одну строку, без переносов, даже если он не помещается в ширину контейнера.

CSS

.no-wrap-text {
  width: 200px; /* Ширина контейнера для наглядности */
  border: 1px solid #ccc;
  padding: 10px;
  overflow: hidden; /* Скрываем текст, который не помещается */
  input1: input2;
}

                     .no-wrap-text {
  width: 200px; /* Ширина контейнера для наглядности */
  border: 1px solid #ccc;
  padding: 10px;
  overflow: hidden; /* Скрываем текст, который не помещается */
  input1: input2;
}

HTML

<p class="no-wrap-text">Этот текст не должен переноситься на другую строку.</p>

Используйте свойство `white-space` со значением, которое запрещает автоматический перенос строк. Это значение `nowrap`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сохранение всех пробелов и переносов

Имеется блок `div` с текстом, содержащим множественные пробелы и переносы строк прямо в HTML. Необходимо применить стиль, чтобы браузер отобразил текст точно так, как он написан в исходном коде, сохраняя все пробелы и переносы.

CSS

.preserve-space {
  border: 1px dashed blue;
  padding: 5px;
  font-family: monospace; /* Моноширинный шрифт для наглядности */
  input1: input2;
}

                     .preserve-space {
  border: 1px dashed blue;
  padding: 5px;
  font-family: monospace; /* Моноширинный шрифт для наглядности */
  input1: input2;
}

HTML

<div class="preserve-space">Строка 1
  Строка 2 с   отступом
Строка 3    с    множественными пробелами.
</div>

Для сохранения всех пробелов и переносов строк из HTML-кода используйте значение `pre` для свойства `white-space`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сохранение пробелов с переносом строк

В этом блоке текст также содержит множественные пробелы и переносы строк. Задача: сохранить все пробелы и переносы из HTML, но при этом разрешить тексту переноситься на новую строку, если он не помещается в ширину контейнера.

CSS

.preserve-and-wrap {
  width: 250px; /* Ограничим ширину */
  border: 1px solid green;
  padding: 10px;
  font-family: monospace;
  input1: input2;
}

                     .preserve-and-wrap {
  width: 250px; /* Ограничим ширину */
  border: 1px solid green;
  padding: 10px;
  font-family: monospace;
  input1: input2;
}

HTML

<div class="preserve-and-wrap">Этот   текст    содержит
много    пробелов и переносы строк.
Он должен сохранить форматирование, но также переноситься, если не помещается в контейнер.</div>

Используйте значение `pre-wrap` для свойства `white-space`. Оно сохраняет пробелы и переносы из HTML, но добавляет автоматические переносы по ширине контейнера.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сохранение переносов строк, но не пробелов

Дан абзац с множественными пробелами и переносами строк в HTML. Необходимо настроить отображение так, чтобы последовательности пробелов схлопывались до одного, но переносы строк из HTML сохранялись.

CSS

.preserve-lines {
  border: 1px solid orange;
  padding: 8px;
  input1: input2;
}

                     .preserve-lines {
  border: 1px solid orange;
  padding: 8px;
  input1: input2;
}

HTML

<p class="preserve-lines">Эта строка    содержит   много    пробелов.
А эта строка начинается с новой строки.

И еще одна строка после пустой.</p>

Для этой задачи подходит значение `pre-line` свойства `white-space`. Оно удаляет лишние пробелы, но учитывает переносы строк из исходного кода.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Поведение `break-spaces`

Используйте CSS, чтобы текст в блоке вел себя подобно `pre-wrap` (сохранял пробелы и переносы, но переносился по ширине), но с одним отличием: пробелы в конце строки не должны схлопываться и могут служить точкой для переноса строки.

CSS

.break-spaces-example {
  width: 180px; /* Узкий контейнер */
  border: 1px solid purple;
  padding: 5px;
  font-family: monospace;
  input1: input2;
}

                     .break-spaces-example {
  width: 180px; /* Узкий контейнер */
  border: 1px solid purple;
  padding: 5px;
  font-family: monospace;
  input1: input2;
}

HTML

<div class="break-spaces-example">Текст с пробелами в конце   
и переносами.
Обратите внимание    на   поведение.</div>

Значение `break-spaces` для свойства `white-space` работает почти как `pre-wrap`, но сохраняет пробелы в конце строк и позволяет переносить строку после них.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Сброс `white-space` для дочернего элемента

Родительскому элементу `div` задано свойство, запрещающее перенос строк. Внутри него есть элемент `span`. Ваша задача — отменить для элемента `span` запрет переноса, вернув ему стандартное поведение обработки пробелов.

CSS

.parent-no-wrap {
  width: 300px;
  border: 1px solid teal;
  padding: 10px;
  white-space: nowrap; /* Запрет переноса для родителя */
}

.parent-no-wrap span {
  font-weight: bold;
  background-color: #eee;
  /* Сброс свойства для span */
  input1: input2;
}

                     .parent-no-wrap {
  width: 300px;
  border: 1px solid teal;
  padding: 10px;
  white-space: nowrap; /* Запрет переноса для родителя */
}

.parent-no-wrap span {
  font-weight: bold;
  background-color: #eee;
  /* Сброс свойства для span */
  input1: input2;
}

HTML

<div class="parent-no-wrap">
  Этот текст не переносится, но <span>этот вложенный текст должен переноситься как обычно, если он достаточно длинный для этого</span>, а остальной текст снова не переносится.
</div>

Родителю задано `white-space: nowrap;`. Чтобы вернуть стандартное поведение для дочернего элемента `span`, примените к нему свойство `white-space` со значением `normal`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Указание свойства `white-space`

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

CSS

.final-task p {
  width: 220px;
  border: 1px solid black;
  padding: 15px;
  overflow: hidden;
  /* Вставьте свойство и значение для запрета переноса */
  input1: input2;
}

                     .final-task p {
  width: 220px;
  border: 1px solid black;
  padding: 15px;
  overflow: hidden;
  /* Вставьте свойство и значение для запрета переноса */
  input1: input2;
}

HTML

<div class="final-task">
  <p>Этот последний абзац не должен иметь переносов строк.</p>
</div>

Свойство, управляющее обработкой пробелов и переносов, называется `white-space`. Для запрета переносов используйте значение `nowrap`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку