Как включить перенос строки p в html

Атрибуты

Устаревшие атрибуты

Определяет, где начинается следующая строка после перевода строки.

Стилизация с CSS

Элемент
имеет единственную цель – создать разрыв линии в блоке текста. Таким образом, он не имеет размеров или визуального стиля как такового. Есть всего несколько свойств, которые вы можете стилизовать.

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

Примеры

Простой br

В следующем примере мы используем элемент
для разрыва линий в почтовом адресе:

br /> 331 E. Evelyn Avenuebr /> Mountain View, CAbr /> 94041br /> USAbr /> 

Результат будет выглядеть так:

Проблемы доступности

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

Техническая сводка

• Категории контентаОсновной поток, текстовый контент.
• Разрешённое содержимое Отсутствует, это пустой элемент.
• Пропуск теговДолжен иметь открывающий тег, но не закрывающий тег. В XHTML документах элемент пишется как
  .
• Допустимые родительские элементы Любой элемент, который поддерживает текстовый контент.
• Интерфейс DOMHTMLBRElement

Спецификации

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

• Элемент
• Элемент

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 19 нояб. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

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

Сделать перенос строки в желаемом месте текста можно несколькими путями. Рассмотрим несколько вариантов: через элемент , элемент и свойство 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
• Оформление ссылок
• Работа с текстом
• Форматирование HTML

Переносы слов

В отличие от текста в полиграфии, на веб-странице редко применяются переносы, поскольку мы не привязаны жёстко к формату бумаги. Сайты могут смотреть на разных мониторах, с разным разрешением, в разных операционных системах и браузерах. Всё это порождает такое сочетание комбинаций, что предугадать, как будет выглядеть конечный текст для пользователя невозможно. Из-за этого обычно текст выравнивается по левому краю, а переносы происходят словами целиком. Но всё же переносы слов в некоторых случаях нужны, например, когда применяются длинные химические или медицинские термины, в узких колонках заданной ширины, ради эстетики. В HTML и CSS ручных или автоматических способов добавления переносов не так уж и много, так что перечислю все.

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

Тег введён в HTML5 и создаёт перенос слов при необходимости. В тех местах, где по правилам русского языка допустим перенос, вставляем (пример 1). Если слово целиком помещается в отведённую ширину, этот тег никак себя не проявит и о его наличии мы даже не узнаем. Если слово не помещается, браузер в месте нахождения тега создаёт перенос.

     .word 
  

Результат данного примера показан на рис. 1.

Рис. 1. Текст с переносами слов

Мягкий перенос

Применение имеет серьёзный недостаток — понять, перенос перед нами или отдельное слово на другой строке, нельзя. Из-за этого может потеряться смысл предложения и его неправильно поймут. Переносы надо делать по правилам типографики, а именно: в конце строки добавлять дефис. С этим отлично справляется мягкий перенос, в коде HTML для него имеется спецсимвол ­ . Он выполняет ту же роль, что и тег — не виден в обычном тексте и переносит слово на другую строку, при этом добавляя дефис (пример 2).

Пример 2. Мягкий перенос

     .word  
 

Результат данного примера показан на рис. 2. Заметьте, насколько эстетичнее и понятнее стал выглядеть текст в сравнении с рис. 1.

Рис. 2. Текст с переносами слов

Свойство word-break

Чтобы автоматизировать процесс создания переносов воспользуйтесь свойством word-break со значением break-all (пример 3). Добавлять какие-либо символы или теги в HTML уже не придётся, всё берут на себя стили.

Пример 3. Применение word-break

     .word  
 

Результат данного примера показан на рис. 3. Правила переносов текста в этом случае не учитываются, поэтому слова могут переноситься весьма причудливым образом.

Рис. 3. Текст с переносами слов

Из всех перечисленных способов «полуручной» с использованием ­ даёт наилучший результат — соблюдаются правила русского языка, текст выглядит наиболее эстетично. Пользуйтесь им, когда в тексте встречаются длинные слова.

Свойство hyphens

И, наконец, самое мощное и удобное свойство для автоматического добавления переносов — hyphens . Его действие основано на встроенном в браузере словаре переносов, поэтому даёт наилучший результат. Поддерживается в IE10, Firefox, Android и iOS. Chrome и Opera не поддерживают. Чтобы это всё работало, для тега добавляем атрибут lang со значением ru (пример 4).

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

     .word  
 

Результат данного примера показан на рис. 4.

Рис. 4. Текст с переносами слов

Запрет переносов

Нередко возникает и обратная задача — запретить переносы в тех местах, где они по правилам языка недопустимы. Например, нельзя отрывать единицы измерения от числа (10 мл), обозначение года (54 до н. э.), инициалы от фамилии, разрывать устойчивые сокращения (т. д.) и др. Чтобы браузер не добавлял переносы в месте пробела, его следует заменить на неразрывный пробел   (пример 5).

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

     .word  
 

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

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

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

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

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

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

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

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

.

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

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