Как сделать перенос строки в html

Как сделать перенос строки?

Сделать перенос строки в желаемом месте текста можно несколькими путями. Рассмотрим несколько вариантов: через элемент , элемент и свойство white-space.

Использование

Первому
игроку
приготовиться

В примере 1 элемент
применяется для вывода стиха, где переносы строк выполняются определённым, задуманным автором образом.

Пример 1. Использование

Перенос текста

Не знаю, о чём я тоскую.
Покоя душе моей нет.
Забыть ни на миг не могу я
Преданье далёких лет.

Генрих Гейне, Лорелея. Перевод Самуила Маршака

Использование

Пример 2. Использование

Перенос текста

if a % 2 == 0: print('Чётное число') else: print('Нечётное число')

Текст внутри выводится моноширинным шрифтом, иными словами, каждая буква имеет одинаковую ширину. Это позволяет располагать символы друг под другом и с помощью пробелов легко выравнивать строки. Переносы текста, как и пробелы, внутри отображаются так же, как и в коде HTML, поэтому дополнительно вставлять какие-то элементы или ещё как-то обозначать перенос не требуется.

Использование свойства white-space

У свойства white-space есть несколько значений, дающих разные возможности, но нас интересует значение pre-line , которое учитывает только переносы текста и игнорирует идущие подряд пробелы (пример 3). Получается, что от взяли только переносы строк без учёта пробелов. Сам шрифт тоже не меняется на моноширинный.

Пример 3. Использование white-space

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

Пример 4. Перенос строк в зависимости от ширины

Здесь текст исходно выводится в одну строку и переносы добавляются браузером автоматически. При уменьшении ширины окна до 600 пикселей переносы возникают там, где мы их сделали в коде HTML.

См. также

text-overflow
white-space
Оформление ссылок
Работа с текстом
Типографика в Bootstrap 5
Форматирование HTML

Тег
HTML перенос строки

Тег
указывает место переноса строки в тексте HTML страницы. Тег br ставится перед местом конца строки, текст после тега будет выведен с новой строки.

Стоит отметить, что тег
устанавливает границу между строками (означает разрыв строки), а не делит текст на абзацы. Чтобы определить абзацы в тексте HTML документа используйте тег .

Синтаксис

Текст первой строки
Текст второй строки.

Отображение в браузере

В примере далее использован разрыв строк
:

Текст первой строки.
Текст второй строки.

Для сравнения, разделение текста на абзацы

Текст первого абзаца.

Текст второго абзаца.

Пример использования
в HTML коде

 
 
Это первая строка обычного текста на веб-странице. В конце перенос строки 
И вот уже вторая строка текста.

Поддержка браузерами

Тег
	Да	Да	Да	Да	Да

Тег br, перенос строки

Стихотворение в цитате всё ещё не похоже на стихотворение, так как не хватает переносов строк внутри строфы. Мы уже знаем много тегов, может какие-то из них подойдут для разбиения текста на строки?

Первый кандидат — тег

. Идеально подходит для выделения строфы, а нам нужно добавить переносы внутрь строф. Отметаем вариант. Второй кандидат — тег . Сохраняет всё форматирование текста. Вроде подходит, но нам нужно сохранить только переносы строк. В общем, ничего не подходит.

Нужен специальный тег, который просто добавляет перенос строки внутри абзаца. Для этого в HTML предусмотрен одиночный тег
(сокращение от «line break»).

Этот тег отлично подходит, если переносы нужны в тексте для повышения его читабельности, например, в почтовых адресах, стихах, текстах песен, режиме работы.

Иногда этот тег применяют неправильно, для разбиения текста на «как бы абзацы». Никогда так не делайте. Для разметки абзацев нужно использовать тег

Перейти к заданию

index.html Сплит-режим
style.css Сплит-режим

Сайт начинающего верстальщика

Блог

Всё ещё день седьмой. Кекс выдал мне задание

Сегодня пришёл Кекс и дал мне немного необычное задание. По соседству с ним поселилась одна кошечка, а Кекс совсем не умеет сочинять песни. Поэтому он попросил меня найти какое-нибудь великое произведение, чтобы он смог исполнить его ей.

Как говорится, для хорошего кота и в феврале март (народная мудрость).

Нашёл лирическое произведение для Кекса:

Мяу мяу мяу мррр мяу мяяяу мяу мяу мяу

Собрание произведений М. Котидзе.