Главная » Языки программирования

Тег разрыва строки html

На чтение 8 мин
Содержание
  1. : элемент «Разрыв строки»
  2. Try it
  3. Attributes
  4. Deprecated attributes
  5. Стиль с CSS
  6. Examples
  7. Simple br
  8. Accessibility concerns
  9. Technical summary
  10. — элемент переноса строки
  11. Интерактивный пример
  12. Атрибуты
  13. Устаревшие атрибуты
  14. Стилизация с CSS
  15. Примеры
  16. Простой br
  17. Проблемы доступности
  18. Техническая сводка
  19. Спецификации
  20. Совместимость с браузерами
  21. Смотрите также
  22. Found a content problem with this page?
  23. MDN
  24. Support
  25. Our communities
  26. Developers
  27. HTML Tag
  28. Definition and Usage
  29. Tips and Notes
  30. Browser Support
  31. Global Attributes
  32. Event Attributes
  33. More Examples
  34. Example
  35. Related Pages
  36. Default CSS Settings
  37. COLOR PICKER
  38. Report Error
  39. Thank You For Helping Us!
  40. Тег разрыва строки html
  41. Правильное применение тега
  42. Случаи неправильного применения тега
  43. Неправильное объединение элементов в группу
  44. Вертикальные отступы

: элемент «Разрыв строки»

Элемент
HTML создает разрыв строки в тексте (возврат каретки). Это полезно для написания стихотворения или обращения, где разделение строк имеет большое значение.

Try it

Как видно из приведенного выше примера, элемент
включен в каждую точку, где мы хотим, чтобы текст разрывался. Текст после
снова начинается в начале следующей строки текстового блока.

Примечание. Не используйте
для создания полей между абзацами; оберните их в элементы и используйте свойство CSS margin для управления их размером.

Attributes

Атрибуты этого элемента включают глобальные атрибуты .

Deprecated attributes

Указывает,с чего начинать следующую строку после перерыва.

Стиль с CSS

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

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

Examples

Simple br

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

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

Accessibility concerns

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

Используйте элементы

и используйте свойства CSS, такие как margin для управления их интервалом.

Technical summary

Content categories Поток контента , формулируя содержание .
Permitted content Нет, это пустой элемент .
Tag omission Должен иметь начальный тег и не должен иметь конечного тега. В документах XHTML запишите этот элемент как
.
Permitted parents Любой элемент, допускающий фразовое содержание .
Неявная роль ARIA Нет соответствующей роли
Разрешенные роли АРИА none , presentation
DOM interface HTMLBRElement
Читайте также:  Скруглить углы div css

Источник

— элемент переноса строки

HTML-элемент устанавливает перевод строки в тексте (возврат каретки). Он полезен при написании поэмы или адреса, где важно деление на строки.

Интерактивный пример

Как мы видим из примера выше, элемент
поставлен в том месте, где мы хотим перенести строку. Текст после
начинается со следующей строки текстового блока.

Примечание: Не используйте для увеличения разрыва между строками в тексте; используйте CSS-свойство margin элемента .

Атрибуты

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

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

Стилизация с 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?

This page was last modified on 5 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

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

Источник

HTML
Tag

To force
line breaks
in a text,
use the br
element.

More «Try it Yourself» examples below.

Definition and Usage

The
tag inserts a single line break.

The
tag is useful for writing addresses or poems.

The
tag is an empty tag which means that it has no end tag.

Tips and Notes

Note: Use the
tag to enter line breaks, not to add space between paragraphs.

Browser Support

Global Attributes

Event Attributes

More Examples

Example

Be not afraid of greatness.

Some are born great,

some achieve greatness,

and others have greatness thrust upon them.

Default CSS Settings

Unlock Full Access 50% off

COLOR PICKER

colorpicker

Join our Bootcamp!

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials
Top References
Top Examples
Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Тег разрыва строки html

Брутальный способ перенести текст или элемент на новую строку.

Время чтения: меньше 5 мин

Обновлено 7 сентября 2022

По мере развития стандарта HTML в него добавлялись новые теги и убирались неактуальные. В HTML5 большой упор был сделан на семантический смысл тегов, а всё, что касалось визуальной составляющей, было отдано на откуп CSS. То есть теперь использование тех или иных тегов определяется их функциональным назначением, а не тем, как тег влияет на внешний вид элемента.

Правильное применение тега

Скопировать ссылку «Правильное применение тега» Скопировано

Стандарт однозначно описывает назначение этого тега и ситуации, в которых уместно его применение: этот тег указывает на место разрыва строки и принудительного переноса текста на новую строку. И только для этих целей он должен применяться. Яркий пример — деление стихотворения по строкам:

   Мой дядя самых честных правил, Когда не в шутку занемог, Он уважать себя заставил И лучше выдумать не мог.  p> Мой дядя самых честных правил,br> Когда не в шутку занемог,br> Он уважать себя заставилbr> И лучше выдумать не мог. p>

Ещё одним примером может служить вёрстка почтового адреса, когда принципиально разнести части адреса по разным строкам:

   432000 г. Ульяновск ул. Ленина, д. 34  address> 432000br> г. Ульяновскbr> ул. Ленина, д. 34 address>

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

Случаи неправильного применения тега

Скопировать ссылку «Случаи неправильного применения тега» Скопировано

Неправильное объединение элементов в группу

Скопировать ссылку «Неправильное объединение элементов в группу» Скопировано

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

   Имя: Адрес:  p> label>Имя: input name="name">label>br> label>Адрес: input name="address">label> p>      
 
Имя:
 
Адрес:
  p>label>Имя: input name="name">label>p> p>label>Адрес: input name="address">label>p>

Вертикальные отступы

Скопировать ссылку «Вертикальные отступы» Скопировано

Ещё один пример неправильного употребления тега — использование его в декоративных целях: для задания вертикальных отступов между элементами. Вертикальные отступы — часть визуального оформления страницы, и должны задаваться исключительно в CSS.

   
Контейнеровоз сел на мель в Суэцком канале
 
.
      
Во всём мире наблюдается дефицит чипов
 
.
   article> h2>Контейнеровоз сел на мель в Суэцком каналеh2> p>. p> article> br> br> article> h2>Во всём мире наблюдается дефицит чиповh2> p>. p> article>

Правильно с использованием CSS:

   
Контейнеровоз сел на мель в Суэцком канале
 
.
    
Во всём мире наблюдается дефицит чипов
 
.
   article> h2>Контейнеровоз сел на мель в Суэцком каналеh2> p>. p> article> article> h2>Во всём мире наблюдается дефицит чиповh2> p>. p> article>      
 article  margin-bottom: 2em;> article  margin-bottom: 2em; >

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

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

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

Источник

Оцените статью
© 2023 Программирование