Перенос слов (word-break, overflow-wrap): Тренажер CSS

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

Эта серия упражнений посвящена управлению переносом слов и разрывом строк в CSS с использованием свойств `word-break` и `overflow-wrap` (ранее известного как `word-wrap`). Вы научитесь предотвращать выход длинных слов или строк символов за пределы их контейнера, применяя различные стратегии разрыва. Задания варьируются от базового применения свойств до более сложных сценариев, помогая закрепить понимание того, как браузер обрабатывает текст, который не помещается в заданные границы.

Список тем

Базовый перенос длинного слова

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

CSS

.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Добавьте свойство для переноса слов */
  input1: input2;
}

                     .container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Добавьте свойство для переноса слов */
  input1: input2;
}

HTML

<div class="container">
  Это очень длинное слово: Supercalifragilisticexpialidociousноононепомещается.
</div>

Используйте свойство `overflow-wrap` со значением `break-word`. Это свойство позволяет разрывать длинные слова, которые иначе вышли бы за границы контейнера.

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

Результат

Сообщения

Выполнить

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

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

Агрессивный разрыв строки

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

CSS

.force-break {
  width: 180px;
  border: 1px solid #aaa;
  padding: 8px;
  margin-top: 15px;
  /* Добавьте свойство для агрессивного разрыва */
  input1: input2;
}

                     .force-break {
  width: 180px;
  border: 1px solid #aaa;
  padding: 8px;
  margin-top: 15px;
  /* Добавьте свойство для агрессивного разрыва */
  input1: input2;
}

HTML

<div class="force-break">
  ЭтаСтрокаБезПробеловДолжнаБытьПринудительноРазорванаВЛюбомМестеЧтобНеВылезатьЗаГраньБлока.
</div>

Используйте свойство `word-break` со значением `break-all`. Это свойство более агрессивно разрывает строки в любом символе, чтобы избежать переполнения.

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

Результат

Сообщения

Выполнить

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

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

Сравнение overflow-wrap и word-break

У вас есть два блока с одинаковым текстом. Примените к первому блоку (`box1`) `overflow-wrap: break-word`, а ко второму (`box2`) `word-break: break-all`. Наблюдайте разницу в поведении переноса.

CSS

.box {
  width: 220px;
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 10px;
}

.box1 {
  /* Перенос только при необходимости */
  input1: input2;
}

.box2 {
  /* Агрессивный перенос */
  input3: input4;
}

                     .box {
  width: 220px;
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 10px;
}

.box1 {
  /* Перенос только при необходимости */
  input1: input2;
}

.box2 {
  /* Агрессивный перенос */
  input3: input4;
}

HTML

<div class="box box1">
  ДлинноеСловоНеразрывное Строка текста.
</div>
<div class="box box2">
  ДлинноеСловоНеразрывное Строка текста.
</div>

Для `.box1` используйте `overflow-wrap: break-word;`. Для `.box2` используйте `word-break: break-all;`. Обратите внимание, как `break-word` пытается сначала переносить по пробелам, а `break-all` разрывает слово независимо от пробелов.

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

Результат

Сообщения

Выполнить

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

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

Предотвращение разрыва слов

Иногда, особенно при работе с текстами на определенных языках (например, CJK), требуется запретить разрыв слов. Примените соответствующее значение `word-break`, чтобы слова не разрывались и переносились только целиком.

CSS

.no-break {
  width: 150px;
  border: 1px solid #99f;
  padding: 5px;
  /* Запретить разрыв слов */
  word-break: input1;
}

                     .no-break {
  width: 150px;
  border: 1px solid #99f;
  padding: 5px;
  /* Запретить разрыв слов */
  word-break: input1;
}

HTML

<div class="no-break">
  Short words here. ButThisIsAVeryLongWord.
</div>

Используйте свойство `word-break` со значением `keep-all`. Это значение предотвращает разрывы внутри слов.

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

Результат

Сообщения

Выполнить

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

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

Перенос слов в элементе с фиксированной шириной

Дан блок `div` с классом `fixed-width` и заданной шириной. Внутри него находится текст с очень длинным словом. Убедитесь, что текст переносится внутри блока, используя свойство `overflow-wrap`.

CSS

.fixed-width {
  width: 250px; /* Не изменять */
  padding: 15px;
  border: 1px dashed #f90;
  background-color: #fff8e1;
  /* Добавьте правило переноса */
  input1: input2;
}

                     .fixed-width {
  width: 250px; /* Не изменять */
  padding: 15px;
  border: 1px dashed #f90;
  background-color: #fff8e1;
  /* Добавьте правило переноса */
  input1: input2;
}

HTML

<div class="fixed-width">
  Этот блок имеет фиксированную ширину, и текст с ExtremelyLongWordThatNeedsWrapping должен корректно переноситься.
</div>

Добавьте правило `overflow-wrap: break-word;` к селектору `.fixed-width`, чтобы длинные слова переносились на следующую строку.

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

Результат

Сообщения

Выполнить

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

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

Использование overflow-wrap: anywhere

Примените более современное значение `anywhere` для свойства `overflow-wrap`. Оно похоже на `break-word`, но имеет некоторые отличия в расчете минимального размера контента. Задача: заставить длинное слово переноситься.

CSS

.modern-wrap {
  width: 190px;
  border: 1px solid #0a0;
  padding: 12px;
  /* Применить современный способ переноса */
  input1: input2;
}

                     .modern-wrap {
  width: 190px;
  border: 1px solid #0a0;
  padding: 12px;
  /* Применить современный способ переноса */
  input1: input2;
}

HTML

<div class="modern-wrap">
  Проверяемпереноссловспомощьюзначения_anywhere_дляоченьдлиннойстрокибезпробелов.
</div>

Используйте `overflow-wrap: anywhere;`. Это значение позволяет разрывать слово в любом месте, если нет других точек для разрыва, минимизируя переполнение.

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

Результат

Сообщения

Выполнить

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

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

Перенос только внутри определенного тега

Внутри блока есть обычный текст и текст, обернутый в тег `<code>`. Примените правило переноса `word-break: break-all;` только к содержимому тега `<code>`, чтобы длинные идентификаторы или код переносились, не затрагивая остальной текст.

CSS

.content-block {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}

/* Правило для переноса внутри тега code */
input1 {
  input2: input3;
  background-color: #f0f0f0; /* Стиль для кода */
  font-family: monospace;
}

                     .content-block {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
}

/* Правило для переноса внутри тега code */
input1 {
  input2: input3;
  background-color: #f0f0f0; /* Стиль для кода */
  font-family: monospace;
}

HTML

<div class="content-block">
  Обычный текст в блоке. А вот пример кода:
  <code>ThisIsAVeryLongIdentifierOrFunctionNameThatShouldBreak</code>
  Продолжение обычного текста.
</div>

Используйте селектор, который выбирает тег `code` внутри класса `.content-block`. Например: `.content-block code`. Затем примените к нему `word-break: break-all;`.

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

Результат

Сообщения

Выполнить

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

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

Перенос длинного URL

Часто длинные URL-адреса в тексте могут вызывать проблемы с переполнением. Примените подходящее свойство и значение к параграфу, чтобы длинный URL корректно переносился внутри контейнера.

CSS

.url-container {
  width: 320px;
  border: 1px solid #888;
  padding: 10px;
}

.url-container p {
  /* Добавить перенос для URL */
  input1: input2;
}

                     .url-container {
  width: 320px;
  border: 1px solid #888;
  padding: 10px;
}

.url-container p {
  /* Добавить перенос для URL */
  input1: input2;
}

HTML

<div class="url-container">
  <p>Пожалуйста, посетите наш сайт: https://www.thisisaveryverylongdomainnameexamplethatwilloverflowthecontainerunlesswrapped.com/some/path/resource</p>
</div>

Используйте `overflow-wrap: break-word;` для элемента `<p>`, содержащего URL. Это позволит URL разорваться в допустимых местах или в любом месте, если необходимо.

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

Результат

Сообщения

Выполнить

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

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