Исполняемые доки HTML: Перенос строки

Q: Как сделать перенос строки в HTML?

Вставьте там, где должна начаться новая строка: Line one Line two. Нажатие Enter в HTML-файле не поможет: браузер считает переносы строк в исходном коде обычными пробелами.

Q: Когда использовать , а когда ?

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

Q: Как сохранить переносы строк из текста без тегов ?

Задайте элементу white-space: pre-line в CSS. Тогда браузер показывает каждый перенос строки в тексте как перенос, но по-прежнему схлопывает лишние пробелы. Это удобно для комментариев пользователей и текста, загруженного через JavaScript.

Q: Как запретить перенос строки в HTML?

Оберните текст в элемент с white-space: nowrap или соедините два слова неразрывным пробелом , чтобы они всегда оставались на одной строке.

Перенос строки в HTML: тег br, новые строки и wbr

Тег начинает новую строку внутри блока текста. Разберем, когда уместен, а когда лучше абзац, как сохранить переносы строк из текста, как разрешить перенос длинных слов через и как запретить перенос строки.

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line break</title>
</head>
<body>
  <p>
    Coddy Ltd.<br>
    12 Market Street<br>
    Springfield
  </p>
  <p>Pressing Enter in the source
     does not break the line.</p>
</body>
</html>

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

 ,   и   создают один и тот же элемент. Используйте тот вариант, который принят в вашем проекте (JSX и XHTML требуют косую черту).

br или p: перенос не равен отступу

  завершает строку внутри того же абзаца. Новый  начинает новый абзац, с отступами сверху и снизу за счет внешних отступов по умолчанию. Можно создавать промежутки несколькими   подряд, но это ненадежно и неверно по смыслу:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>br vs p</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { border: 2px solid #e5e7eb; padding: 0 12px; margin-bottom: 12px; }
    .spaced p { margin: 0 0 24px; }
  </style>
</head>
<body>
  <div class="box">
    <p>With br tags:<br><br><br>Second paragraph?</p>
  </div>
  <div class="box spaced">
    <p>With two paragraphs and CSS margin:</p>
    <p>Second paragraph.</p>
  </div>
</body>
</html>

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

Где   уместен: адреса, стихи и тексты песен, строки в подписи, то есть там, где перенос принадлежит самому тексту. Для всего остального используйте абзацы, списки или заголовки.

Как сохранить переносы строк из текста

Если текст приходит извне (поле комментария, база данных, скрипт), в нем настоящие символы перевода строки, а не теги  . CSS-свойство white-space: pre-line заставляет браузер показывать эти символы как переносы строк:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pre-line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .msg { border: 2px solid #e5e7eb; padding: 8px 12px; margin-bottom: 8px; }
    .keep { white-space: pre-line; border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="msg" id="a"></div>
  <div class="msg keep" id="b"></div>
  <script>
    const text = 'Hi team,\nThe build is fixed.\nThanks!';
    document.getElementById('a').textContent = text;
    document.getElementById('b').textContent = text;
  </script>
</body>
</html>

Одна и та же строка показана в одну строку в сером блоке и в три строки в синем. Это еще и безопаснее, чем вставлять теги   в пользовательский текст через innerHTML, ведь так пользователи смогли бы внедрить HTML. Чтобы сохранить еще и пробелы с отступами, используйте white-space: pre, о котором рассказывает страница пробел в HTML.

Перенос длинных слов: wbr

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wbr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 160px; border: 2px solid #f59e0b; padding: 4px; margin-bottom: 12px; }
  </style>
</head>
<body>
  <div class="narrow">example.com/docs/html/line-break-tag</div>
  <div class="narrow">example.com/<wbr>docs/<wbr>html/<wbr>line-break-tag</div>
</body>
</html>

Первый путь выходит за границы блока; второй переносится в местах . Для текста, который вы не контролируете, CSS-свойство overflow-wrap: anywhere разрешает переносить длинные слова в любом месте.

Как запретить перенос строки

Иногда нужно обратное: удержать вместе «10 km» или номер телефона. Есть два способа:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No break</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 170px; border: 2px solid #16a34a; padding: 4px; }
    .nowrap { white-space: nowrap; }
  </style>
</head>
<body>
  <p class="narrow">The race is exactly 10&nbsp;km long, call <span class="nowrap">+1 555 0100</span> to join.</p>
</body>
</html>

  это пробел, на котором браузер не переносит строку, поэтому «10» и «km» остаются вместе. white-space: nowrap держит на одной строке весь span. Замените   обычным пробелом или уберите класс, и при такой ширине оба фрагмента разобьются на две строки.

Частые ошибки

Enter в исходном коде в надежде на новую строку. Переносы строк в HTML это пробелы. Используйте  , отдельные элементы или white-space: pre-line.
  для отступов. Используйте абзацы и margin.
Список из  . Используйте <ul> или <ol> с <li>, которые программы чтения с экрана объявляют как список.
. Это некорректно. Пишите  .
  в пользовательском тексте через innerHTML. Задавайте textContent и используйте white-space: pre-line.

Часто задаваемые вопросы

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

Вставьте   там, где должна начаться новая строка: Line one Line two. Нажатие Enter в HTML-файле не поможет: браузер считает переносы строк в исходном коде обычными пробелами.

Как писать: , или ?

Все три варианта работают в HTML и создают один и тот же элемент.   это обычная форма HTML; варианты с косой чертой поддерживаются для совместимости с XHTML и JSX. Сам по себе  некорректен, хотя браузеры читают его как еще один перенос строки.

Когда использовать , а когда ?

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

Как сохранить переносы строк из текста без тегов ?

Задайте элементу white-space: pre-line в CSS. Тогда браузер показывает каждый перенос строки в тексте как перенос, но по-прежнему схлопывает лишние пробелы. Это удобно для комментариев пользователей и текста, загруженного через JavaScript.

Как запретить перенос строки в HTML?

Оберните текст в элемент с white-space: nowrap или соедините два слова неразрывным пробелом  , чтобы они всегда оставались на одной строке.

Связанные концепции