— элемент переноса строки
HTML-элемент устанавливает перевод строки в тексте (возврат каретки). Он полезен при написании поэмы или адреса, где важно деление на строки.
Интерактивный пример
Как мы видим из примера выше, элемент
поставлен в том месте, где мы хотим перенести строку. Текст после
начинается со следующей строки текстового блока.
Примечание: Не используйте для увеличения разрыва между строками в тексте; используйте CSS-свойство margin элемента .
Атрибуты
Устаревшие атрибуты
Определяет, где начинается следующая строка после перевода строки.
Стилизация с CSS
Элемент
имеет единственную цель – создать разрыв линии в блоке текста. Таким образом, он не имеет размеров или визуального стиля как такового. Есть всего несколько свойств, которые вы можете стилизовать.
Вы можете установить значение margin на
чтобы увеличить расстояние между линиями в блоке, но это плохая практика – лучше использовать свойство line-height для этой цели.
Примеры
Простой br
В следующем примере мы используем элемент
для разрыва линий в почтовом адресе:
br /> 331 E. Evelyn Avenuebr /> Mountain View, CAbr /> 94041br /> USAbr />
Результат будет выглядеть так:
Проблемы доступности
Разделять абзацы в тексте, используя
не только плохая практика, но и проблема для людей, которые используют программы чтения с экрана. Программы чтения могут сообщать о наличии элемента, но не содержимом в
. Это может привести к путанице и разочарованию для человека, использующего программу чтения с экрана.
Техническая сводка
- Категории контентаОсновной поток, текстовый контент.
- Разрешённое содержимое Отсутствует, это пустой элемент.
- Пропуск теговДолжен иметь открывающий тег, но не закрывающий тег. В XHTML документах элемент пишется как
. - Допустимые родительские элементы Любой элемент, который поддерживает текстовый контент.
- Интерфейс DOMHTMLBRElement
Спецификации
| Specification |
|---|
| HTML Standard # the-br-element |
Совместимость с браузерами
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 4 авг. 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– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Тег
HTML перенос строки
Тег
указывает место переноса строки в тексте HTML страницы. Тег br ставится перед местом конца строки, текст после тега будет выведен с новой строки.
Стоит отметить, что тег
устанавливает границу между строками (означает разрыв строки), а не делит текст на абзацы. Чтобы определить абзацы в тексте HTML документа используйте тег .
Синтаксис
Текст первой строки
Текст второй строки.Отображение в браузере
В примере далее использован разрыв строк
:
Текст первой строки.
Текст второй строки.
Для сравнения, разделение текста на абзацы
:
Текст первого абзаца.
Текст второго абзаца.
Пример использования
в HTML коде
Это первая строка обычного текста на веб-странице. В конце перенос строки
И вот уже вторая строка текста.
Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| Да | Да | Да | Да | Да |
word-wrap
Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область. Данное свойство носит черновой характер и при валидации документа на CSS3 выдает ошибку.
Синтаксис
word-wrap: normal | break-word | inherit
Значения
normal Строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью тега
). break-word Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока. inherit Наследует значение родителя.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
word-wrap Cуществительное
высокопревосходительство
Одушевленное существительное
одиннадцатиклассница
Химическое вещество
метоксихлордиэтиламинометилбутиламиноакридин
Результат данного примера показан на рис. 1.
Рис. 1. Перенос длинных слов
HTML: Перенос строки
В ходе создания HTML-документа может возникнуть необходимость переноса строки внутри абзаца: например, при размещении отрывка из стихотворения каждая фраза должна начинаться с новой строки.
Обратите внимание, что вы не сможете изменить вид отображения текста на странице с помощью добавления в код дополнительных пробелов или переносов строки. Любое количество пробелов и переносов строк будет считаться как один пробел, так как браузер будет автоматически удалять все лишние пробелы и переносы строк, в этом случае браузер отобразит отрывок стихотворения в виде одного предложения:
Заглянула осень в сад - Птицы улетели. За окном с утра шуршат Жёлтые метели.
Обратите внимание, что браузер игнорирует ваше форматирование текста
Примите во внимание, что краткое описание придумано и используется не из-за лени, а для повышения эффективности, за счет более легкого чтения кода. И в самом деле, спустя некоторое время, проведенное за чтением HTML-кода, вы увидите, что такие элементы легче воспринимаются и запоминаются.
Это обычный
абзац с разры-
вом строки
Для переноса текста на несколько строк тег
ставится соответствующее количество раз.
С этой темой смотрят:
- HTML абзац и красная строка
- HTML тег
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru