HTML: Форматированный текст

Иногда возникает потребность вставить текст, сохраняя его оригинальное форматирование. Взглянем на знаменитую «лесенку Маяковского» из стихотворения «Сергею Есенину».

Вы ушли, как говорится, в мир в иной. Пустота... Летите, в звезды врезываясь. Ни тебе аванса, ни пивной. Трезвость.

Владимир Маяковский считал, что именно в таком виде лучше всего оформляется ритм стиха.

Оформить такой текст с помощью спецсимволов в HTML очень сложно. Придётся «жонглировать» пробельными спецсимволами. Из-за этого такую разметку будет очень сложно поддерживать в будущем:

<p>Вы ушли,</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;как говорится,</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;в мир в иной.</p>

Для решения этой проблемы существует специальный тег <pre>, задача которого — вывести текст внутри себя с сохранением всех пробельных символов. По умолчанию тег <pre> выводит текст моноширинным шрифтом, в котором все символы имеют одинаковую ширину, в отличие от обычных шрифтов.

<pre>
Вы ушли,
        как говорится,
                      в мир в иной.
Пустота...
        Летите,
              в звезды врезываясь.
Ни тебе аванса,
              ни пивной.
Трезвость.
</pre>

Внутри тега pre можно использовать теги для оформления текста: , , , .

Задание

Добавьте любой текст в тег <pre> и вставьте его в редактор. Попробуйте различные варианты текстов.

Как с вами связаться? 🙃

Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект

Упражнение не проходит проверку — что делать? 😶

В моей среде код работает, а здесь нет 🤨

Мой код отличается от решения учителя 🤔

Прочитал урок — ничего не понятно 🙄

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются

HTML: Форматированный текст

Владимир Маяковский считал, что именно в таком виде лучше всего оформляется ритм стиха.

<p>Вы ушли,</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;как говорится,</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;в мир в иной.</p>

<pre>
Вы ушли,
        как говорится,
                      в мир в иной.
Пустота...
        Летите,
              в звезды врезываясь.
Ни тебе аванса,
              ни пивной.
Трезвость.
</pre>

Внутри тега pre можно использовать теги для оформления текста: , , , .

Задание

Добавьте любой текст в тег <pre> и вставьте его в редактор. Попробуйте различные варианты текстов.

Коммерческий опыт и Трудоустройство

Как с вами связаться? 🙃

Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект

Упражнение не проходит проверку — что делать? 😶

В моей среде код работает, а здесь нет 🤨

Мой код отличается от решения учителя 🤔

Прочитал урок — ничего не понятно 🙄

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются

← ПредыдущийСледующий →

Ваше упражнение проверяется по этим тестам

const { test } = require('tests');

test(({ query, expect }) => {

  const pre = query(document, 'pre');
  expect(pre).to.be.visible;

});

← ПредыдущийСледующий →

Решение учителя откроется через:

20:00

← ПредыдущийСледующий →