- Атрибут переноса строки html
- Примеры использования
- Глобальные атрибуты
- Нюансы
- Чем заменить тег
- — элемент переноса строки
- Интерактивный пример
- Атрибуты
- Устаревшие атрибуты
- Стилизация с CSS
- Примеры
- Простой br
- Проблемы доступности
- Техническая сводка
- Спецификации
- Совместимость с браузерами
- Смотрите также
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- Перенос текста с помощью CSS и HTML
- Перенос текса на следующую строку
- Как сделать CSS перенос слова на следующую строку?
- Атрибут переноса строки html
- Синтаксис
- Атрибуты
- Пример
- Спецификация
- Браузеры
- См. также
Атрибут переноса строки html
Тег
— это элемент переноса строки, он используется для создания новой строки или начала нового абзаца в блоке текста.
Это первая строка.
Это вторая строка.
Примеры использования
Создание переносов строк в абзаце:
Здесь есть немного текста.
Здесь есть еще немного текста.
Добавление пробела между двумя элементами:
Добро пожаловать на мой сайт!
Разбиение длинного предложения на несколько строк:
Посетите мой сайт: https://www.example.com
для получения дополнительной информации.
Для чего использовать тег
- Создать новую строку в стихотворении.
- Добавить перенос строки в адресе.
- Начать новый абзац в сообщении.
- Разбить длинное имя на несколько строк.
- Создать маркированный список без использования тегов.
- Добавить разрыв строки после изображения.
- Создать подзаголовок.
Глобальные атрибуты
Ограничения тега
Тег
не следует использовать для управления интервалами или для оформления страницы сайта. Он должен использоваться только по своему прямому назначению — для переноса строки в тексте.
Нюансы
- Если тег
используется неправильно или чрезмерно, он может сделать текст трудночитаемым и негативно повлиять на доступность. - Если тег используется внутри заголовка или элемента списка, он может повлиять на семантику документа.
Чем заменить тег
👉🏻 Другие теги для структурирования контента
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
— элемент переноса строки
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.
Перенос текста с помощью CSS и HTML
Сегодня расскажу про HTML и CSS перенос текста. Очень часто возникает ситуация, когда какой-то текст или слово не помещается в блоке и нужно перенести его на следующую строку.
Перенос текса на следующую строку
Для переноса текста можно использовать специальный html тег
. Это одиночный тег, то есть его не нужно закрывать, и ставится он в том месте, где вам нужно осуществить перенос на следующую строку.
Если вы через CSS задаёте более узкую ширину для блока с текстом то перенос текста осуществляется автоматически. То есть те слова, которые не помещаются в одной строке перескакивают на следующую.
Как сделать CSS перенос слова на следующую строку?
Осуществить перенос слова можно при помощи CSS свойства word-break.
У данного CSS свойства может быть несколько значений:
- Normal – значение по умолчанию, то есть перенос слова не осуществляется и если оно не помещается в блок с текстом, то просто вылезет за его пределы.
Например: Выглядит не очень! Не правда ли ?! - break-all – переносит часть слова на следующую строку если оно не помещается в блоке с текстом. Вот что получится:
Здесь ну oооооооооооооооочень длинное слово, которое не плохо было бы перенести на новую строку при помощи CSS.
Сам HTML кода блока с текстом для переноса в моём случае выглядит вот так:
Атрибут переноса строки html
Элемент
(от англ. line break — перенос строки) устанавливает перевод строки в том месте, где он находится. В отличие от элемента , использование
не добавляет пустой отступ перед строкой.
Синтаксис
Атрибуты
Пример
Результат данного примера показан на рис. 1.
Рис. 1. Вид текста при использовании
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.