Сделать перенос строки в желаемом месте текста можно несколькими путями. Рассмотрим несколько вариантов: через элемент <br>, элемент <pre> и свойство white-space.
Использование <br>
Элемент <br> делает перенос строки в том месте, где он располагается. Например, в этом предложении каждое слово будет отображаться на отдельной строке текста, потому что между словами вставлен <br>.
<p>Первому<br>игроку<br>приготовиться</p>
В примере 1 элемент <br> применяется для вывода стиха, где переносы строк выполняются определённым, задуманным автором образом.
Пример 1. Использование <br>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Перенос текста</title>
</head>
<body>
<p>Не знаю, о чём я тоскую.<br>
Покоя душе моей нет.<br>
Забыть ни на миг не могу я<br>
Преданье далёких лет.</p>
<p>Генрих Гейне, Лорелея. Перевод Самуила Маршака</p>
</body>
</html>
Использование <pre>
Элемент <pre> отображает текст «как есть» со всеми его пробелами и переносами. Обычно это применяется для вывода кода программы, где отступы играют важное значение (пример 2).
Пример 2. Использование <pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Перенос текста</title>
<style>
pre {
padding: 1em; /* Поля вокруг текста */
border: 1px solid #333; /* Параметры рамки */
font-size: 1rem; /* Размер шрифта */
}
</style>
</head>
<body>
<pre>if a % 2 == 0:
print('Чётное число')
else:
print('Нечётное число')</pre>
</body>
</html>
Текст внутри <pre> выводится моноширинным шрифтом, иными словами, каждая буква имеет одинаковую ширину. Это позволяет располагать символы друг под другом и с помощью пробелов легко выравнивать строки.
Переносы текста, как и пробелы, внутри <pre> отображаются так же, как и в коде HTML, поэтому дополнительно вставлять какие-то элементы или ещё как-то обозначать перенос не требуется.
Использование свойства white-space
У свойства white-space есть несколько значений, дающих разные возможности, но нас интересует значение pre-line, которое учитывает только переносы текста и игнорирует идущие подряд пробелы (пример 3). Получается, что от <pre> взяли только переносы строк без учёта пробелов. Сам шрифт тоже не меняется на моноширинный.
Пример 3. Использование white-space
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Перенос текста</title>
<style>
.pre {
white-space: pre-line; /* Только переносы строк */
}
</style>
</head>
<body>
<div class="pre">В далёкой стране жил умный червячок по имени Оскар.
Он был не обычным червячком, потому что Оскар любил
смотреть на звёзды и задавать вопросы,
на которые никто из его друзей не мог ответить.</div>
</body>
</html>
Переносы текста с участием стилевого свойства white-space дают нам дополнительные возможности, учитывающие ширину экрана. В частности, для широкого экрана переносы можно убрать, а для маленького экрана, наоборот, установить. В примере 4 с помощью медиа-запроса устанавливаем, что при уменьшении ширины окна добавятся переносы строк.
Пример 4. Перенос строк в зависимости от ширины
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Перенос текста</title>
<style>
/* Стиль для ширины меньше 600 пикселей */
@media screen and (max-width: 600px) {
.pre {
white-space: pre-line; /* Переносы строк */
}
}
</style>
</head>
<body>
<div class="pre">В далёкой стране жил умный червячок по имени Оскар.
Он был не обычным червячком, потому что Оскар любил
смотреть на звёзды и задавать вопросы,
на которые никто из его друзей не мог ответить.</div>
</body>
</html>
Здесь текст исходно выводится в одну строку и переносы добавляются браузером автоматически. При уменьшении ширины окна до 600 пикселей переносы возникают там, где мы их сделали в коде HTML.