Как сделать перенос в html
Перейти к содержимому

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

  • автор:

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

Сделать перенос строки в желаемом месте текста можно несколькими путями. Рассмотрим несколько вариантов: через элемент , элемент и свойство white-space.

Использование

Первому
игроку
приготовиться

В примере 1 элемент
применяется для вывода стиха, где переносы строк выполняются определённым, задуманным автором образом.

Пример 1. Использование

Перенос текста

Не знаю, о чём я тоскую.
Покоя душе моей нет.
Забыть ни на миг не могу я
Преданье далёких лет.

Генрих Гейне, Лорелея. Перевод Самуила Маршака


Использование

Пример 2. Использование

Перенос текста 

if a % 2 == 0: print('Чётное число') else: print('Нечётное число')

Текст внутри выводится моноширинным шрифтом, иными словами, каждая буква имеет одинаковую ширину. Это позволяет располагать символы друг под другом и с помощью пробелов легко выравнивать строки. Переносы текста, как и пробелы, внутри отображаются так же, как и в коде HTML, поэтому дополнительно вставлять какие-то элементы или ещё как-то обозначать перенос не требуется.

Использование свойства white-space

У свойства white-space есть несколько значений, дающих разные возможности, но нас интересует значение pre-line , которое учитывает только переносы текста и игнорирует идущие подряд пробелы (пример 3). Получается, что от взяли только переносы строк без учёта пробелов. Сам шрифт тоже не меняется на моноширинный.

Пример 3. Использование white-space

Переносы текста с участием стилевого свойства white-space дают нам дополнительные возможности, учитывающие ширину экрана. В частности, для широкого экрана переносы можно убрать, а для маленького экрана, наоборот, установить. В примере 4 с помощью медиа-запроса устанавливаем, что при уменьшении ширины окна добавятся переносы строк.

Пример 4. Перенос строк в зависимости от ширины

Здесь текст исходно выводится в одну строку и переносы добавляются браузером автоматически. При уменьшении ширины окна до 600 пикселей переносы возникают там, где мы их сделали в коде HTML.

См. также

  • text-overflow
  • white-space
  • Оформление ссылок
  • Работа с текстом
  • Форматирование HTML

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

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 19 нояб. 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 коде

 
 
Это первая строка обычного текста на веб-странице. В конце перенос строки 
И вот уже вторая строка текста.

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

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
Да Да Да Да Да

white-space

normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега
переносит текст на новую строку. pre Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. inherit Наследует значение родителя.

Действие значений на текст представлено в табл. 1.

Табл. 1. Перенос текста и пробелы при разных значениях white-space

Значение Перенос текста Пробелы
normal Переносится Не учитываются
nowrap Не переносится Не учитываются
pre Не переносится Учитываются
pre-line Переносится Не учитываются
pre-wrap Переносится Учитываются

HTML5 CSS2.1 IE Cr Op Sa Fx

    white-space

Результат данного примера показан на рис. 1.

Применение свойства white-space

Рис. 1. Применение свойства white-space

Объектная модель

[window.]document.getElementById(» elementID «).style.whiteSpace

Браузеры

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line , pre-wrap и inherit . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .

Opera до версии 9.5 не поддерживает значение pre-line . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .

Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line .

Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap . Для значения normal , nowrap , и pre воспринимаются как pre-wrap .

Похожие публикации:
  1. Где находится visual studio
  2. Как выглядит ford mustang gt
  3. Какой редактор выбрать для python новичку
  4. Чем заклеить бензобак луаз

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

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