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

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

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

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

Этот элемент включает в себя глобальные атрибуты (en-US).

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

clear

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

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

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

Простой br

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

Mozilla<br>
331 E. Evelyn Avenue<br>
Mountain View, CA<br>
94041<br>
USA<br>

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

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

<br>. Это может привести к путанице и разочарованию для человека, использующего программу чтения с экрана.

  • Категории контента Основной поток, текстовый контент.
  • Разрешённое содержимое Отсутствует, это пустой элемент.
  • Пропуск теговДолжен иметь открывающий тег, но не закрывающий тег. В XHTML документах элемент пишется как <br />.
  • Допустимые родительские элементы
    Любой элемент, который поддерживает текстовый контент.
  • Интерфейс DOM HTMLBRElement
Specification
HTML Standard
# the-br-element

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

  • Элемент <address>
  • Элемент <p>

Found a content problem with this page?

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

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Перенос строки в HTML и CSS с помощью тегов: быстрая инструкция

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

 

Перенос строки силами HTML

Самый примитивный способ, как осуществить перенос на новую строку, — это использовать чередование тегов <p> или <div>. Оба эти тега работают примерно по одинаковому принципу, то есть любой контент, помещенный внутри этих тегов, будет начинаться с новой строки.

Тег <div> — это более широкий тег, поэтому использовать его только для переноса строк — это дурной тон, но вариант такой есть.

Тег <p> — это абзац. Все мы знаем еще со времен школьной скамьи, что абзац всегда начинается с новой строки. Поэтому именно <p> позволяет красиво разбивать текст на абзацы и осуществлять перенос строки в HTML. Тег <р> — это парный тег, поэтому не нужно забывать «закрывать» абзац тегом </р>.

Если вы хотите на своем сайте публиковать стихотворения, а там, как мы знаем, нужно применять переносы строк, чтобы стих выглядел красиво, то в HTML есть специальный для этого тег <pre>, который также является парным и закрывается тегом </pre>. Его преимущество в том, что все, что вы поместите внутри тега, на вашем сайте не будет подвергаться изменениям. То есть, если вы разместите внутри тега стихотворение из 4-х столбиков, на вашем сайте оно отразится, как стихотворение из 4-х столбиков.

Но что делать, если нужен перенос единственной строки в HTML или необходимо осуществить перенос единственного слова на новую строку и т.  д. В этих случаях применять какой-либо из описанных выше тегов будет нецелесообразно. Когда возникнет такая потребность, нужно применить тег <br>. Данный тег является одиночным, и его можно использовать сколько угодно. Можно даже применять его после каждой буквы одного слова, чтобы написать слово вертикально.

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

 

Перенос строки или слов в HTML при помощи CSS

Допустим, у нас есть некий HTML-код:

<body>

<p>В<br>е<br>р<br>т<br>и<br>к<br>а<br>л<br>ь<br>н<br>о</p>

</body>

 

Внутри такого кода есть некий текст, который вы хотите уместить в рамках одного блока, или вам просто нужно осуществить неоднократный перенос строк в HTML. Тег <br> решит проблему — это однозначно. Но с эстетической стороны большое обилие тегов <br> смотрится не очень красиво.

Тут на помощь придут теги CSS, которые могут осуществить перенос строк в HTML. Вот несколько из этих свойств:

  • overflow-wrap со значениями: break-word

  • word-wrap со значениями: break-word

  • word-break со значениями: keep-all, break-all

  • line-break со значениями: loose, normal, strict

  • hyphens со значениями: none, auto

Все эти свойства будут осуществлять автоматический перенос строк и слов в рамках блока, к которому они применяются. Если нужно в определенном месте перенести слово, то можно воспользоваться «ручным способом» — для этого можно использовать сочетание символов «&shy;».

Запуская бесплатные игровые атоматы на freeslots.com.ua при помощи мобильных гаджетов, игроки смогут получать удовольствие от процессом игры в казино и зарабатывать настоящие деньги и срывать джекпоты. Достаточно зарегистрироваться в интернет казино и провести внесение средств на депозитный счет, чтобы можно было играть на слотах на деньги. При применении этого символа слово перенесется по всем правилам русского языка — с дефисом.

 

Заключение

Как правило, если нужен единичный перенос строки в HTML, то проще всего воспользоваться тегом <br>, именно он является самым распространенным и эффективным методом. 

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

HTML тег br

❮ Назад Полный справочник HTML Далее ❯


Пример

Вставка одиночных разрывов строк в текст:

Чтобы принудительно
разрывы строк
в тексте,
используйте элемент br
.

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Тег
вставляет одиночный разрыв строки.


9Тег 0020 полезен для написания адресов или стихов.

Тег
является пустым тегом, что означает, что он не имеет конечного тега.

Советы и примечания

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

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

Элемент

 Да Да Да Да Да

Глобальные атрибуты

Тег
также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег
также поддерживает атрибуты событий в HTML.

Другие примеры

Пример

Используйте
в стихотворении:

Не бойся величия.

Некоторые рождаются великими,

некоторые достичь величия,

и другим навязано величие.

-Уильям Шекспир

Попробуйте сами »

Связанные страницы

Руководство по HTML: параграфы HTML

Ссылка HTML DOM: объект BR

Настройки CSS по умолчанию

Нет.

❮ Предыдущий Полный справочник HTML Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java

Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

: Элемент разрыва строки - HTML: язык разметки гипертекста

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

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

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

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

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

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

очистить Устаревший

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

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

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

Simple br

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

 Mozilla

331 Э. Эвелин Авеню

Маунтин-Вью, Калифорния

94041

США

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

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

Используйте

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

Категории контента Потоковое содержание, фразовое содержание.
Разрешенный контент Нет; это пустой элемент.
Отсутствие тега Должен иметь начальный тег и не иметь конечного тега. В XHTML-документах запишите этот элемент как
.
Разрешенные родители Любой элемент, принимающий фразовое содержание.
Неявная роль ARIA Нет соответствующей роли
Разрешенные роли ARIA нет , представление
Интерфейс DOM HTMLBRЭлемент
9 90 загрузка только в таблицах BCD браузера.

No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Спецификация
HTML Standard
# the-br-element