| HTML | WebReference
Элемент <br> (от англ. line break — перенос строки) устанавливает перевод строки в том месте, где он находится. В отличие от элемента <p>, использование <br> не добавляет пустой отступ перед строкой.
Синтаксис
Текст<br> текст
Атрибуты
- clear
- Сообщает браузеру, как обрабатывать следующую строку, если текст обтекает элемент.
Пример
<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>BR</title> </head> <body> <p>Р.Л. Стивенсон</p> <p>Лето в стране настало,<br> Вереск опять цветёт.<br> Но некому готовить<br> Вересковый мёд.</p> </body> </html>Результат данного примера показан на рис. 1.
Рис. 1. Вид текста при использовании <br>
Спецификация
| Спецификация | Статус |
|---|---|
| WHATWG HTML Living Standard | Живой стандарт |
| HTML5 | Рекомендация |
HTML 4. 01 Specification | Рекомендация |
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 3 | 12 | 1 | 3. 5 | 1 | 1 |
| 1 | 1 | 6 | 1 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Текст
См. также
- Форматирование HTML
Рецепты
- Как сделать перенос строки?
Практика
- Важный текст
- Переносы строк
Элементы HTML
Атрибуты
Значения
Типы элементов
Аудио и видео
Документ
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Формы
Фреймы
Свойство white-space — разрывы строк длинного текста, пробелы между словами
Свойство white-space устанавливает
как переносить текст на новую строку, а также
как отображать пробелы между словами и переносы
строк (места, где был нажат Enter при наборе
кода).
Синтаксис
селектор {
white-space: nowrap | pre | pre-line | pre-wrap | normal;
}
Значения
| Значение | Описание |
|---|---|
nowrap | Запрещает тексту переносится на другую строку, даже если он не помещается в ширину контейнера (в этом случае текст просто вылезет за его границы). Однако, добавление тега br заставит текст перенестись на новую строку. |
pre | Текст показывается так, как был набран в блокноте при верстке сайта: со всеми пробелами и
enter-ами (если в коде набрано несколько пробелов — на экране тоже будет несколько).
При этом браузер не будет переносить текст на новую строку, если он не помещается
в контейнер — текст просто вылезет за его границы. свойство font-family). |
pre-wrap | То же самое, что и pre, отличие в том, что если текст слишком длинный и не влазит в контейнер — браузер перенесет его на другую строку. |
pre-line | Браузер учитывает только Enter-ы в HTML коде и игнорирует все остальное (несколько пробелов будут выглядеть как один, браузер сам расставляет разрывы строк). |
normal | Стандартное поведение: браузер сам расставляет разрывы строки так, чтобы слова поместились в контейнер. Несколько пробелов в коде будут выглядеть как один на экране. |
Значение по умолчанию: normal.
Пример . Значение nowrap
В данном примере текст не поместится в контейнер
и вылезет за его границы, так как задано
значение nowrap:
</div>#elem {
width: 200px;
white-space: nowrap;
border: 1px solid red;
}
:
Пример . Значение nowrap и тег br
Если добавить тег br — текст перенесется на новую строку (именно в том месте, где стоит br):
<div>
Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire.
</div>
:
Пример . Значение pre
В данном примере текст показывается так, как был набран в редакторе HTML кода (со всеми отступами клавишей Tab, с Enter и так далее):
<div>
Lorem ipsum
dolor sit amet, consectetur adipiscing elitorire.
</div>#elem {
width: 200px;
white-space: pre;
border: 1px solid red;
}
:
Пример .
Значение pre-wrapА сейчас текст показывается так, как был набран в редакторе HTML кода, однако, вылезающие части переносятся на новую строку:
<div>
Lorem ipsum
dolor sit amet, consectetur adipiscing elitorire.
</div>#elem {
width: 200px;
white-space: pre-wrap;
border: 1px solid red;
}
:
Смотрите также
- свойства
word-breakиoverflow-wrap,
которые позволяют перенести буквы длинного слова на новую строку - свойство
tab-size,
которое устанавливает размер отступа, созданного клавишей Tab - свойство
hyphens,
которое включает переносы слов по слогам - свойство
overflow,
которое обрезает вылезающие за границу блока части - тег
pre,
который показывает текст так, как он был набран в редакторе HTML кода
Абзацы HTML и разрывы строк
Реклама
В этом уроке вы узнаете, как создавать абзацы в HTML.
Создание абзацев
Элемент абзаца используется для публикации текста на веб-страницах.
Абзацы определяются тегом
Пример
Попробуйте этот код »Это абзац.
Это еще один абзац.
Примечание. Встроенные таблицы стилей браузеров автоматически создают некоторое пространство над и под содержимым абзаца (называемое полем), но вы можете переопределить его с помощью CSS.
Закрытие элемента абзаца
В HTML 4 и более ранних версиях достаточно было инициировать новый абзац с помощью открывающего тега. Большинство браузеров будут правильно отображать HTML, даже если вы забудете конечный тег. Например:
Пример
Попробуйте этот код »Это абзац.
Это другой абзац.
HTML-код в приведенном выше примере будет работать в большинстве веб-браузеров, но не полагайтесь на него.
Примечание: В целях прямой совместимости и надлежащей практики кодирования рекомендуется использовать как открывающий, так и закрывающий теги для абзацев.
Создание разрывов строк
Тег используется для вставки разрыва строки на веб-странице.
Поскольку является пустым элементом, соответствующий тег
не требуется.
Пример
Попробуйте этот код »Это абзац
с разрывом строки.Это
еще один абзац
с разрывами строк.
Примечание: Не используйте пустой абзац, т.е. , чтобы добавить дополнительное пространство на ваши веб-страницы. Браузер может игнорировать пустые абзацы, поскольку это логический тег. Вместо этого используйте свойство CSS 
Создание горизонтальных линий
Вы можете использовать тег
, тег
Пример
Попробуйте этот код »Это абзац.
<час>Это еще один абзац.
Управление пробелами
Обычно браузер отображает несколько пробелов, созданных внутри HTML-кода, нажав клавишу пробела или клавишу табуляции на клавиатуре. как единое пространство. Множественные разрывы строк, созданные внутри HTML-кода при нажатии клавиши ввода, также отображаются как один пробел.
Следующие абзацы будут отображаться в одну строку без пробелов:
Пример
Попробуйте этот код »В исходном коде этот абзац содержит несколько пробелов.
Этот абзац содержит несколько вкладок и разрывов строк в исходном коде.
Вставка для создания дополнительных последовательных пробелов, а вставьте тег
Пример
Попробуйте этот код »В этом абзаце несколько пробелов.
Этот абзац содержит несколько
строк
разрывов.
Определение предварительно отформатированного текста
Иногда при использовании , и т.д. для управления пробелами не очень удобно. Кроме того, вы можете использовать тег
В следующем примере текст в браузере будет отображаться так же, как в исходном коде:
Пример
Попробуйте этот код »
Мерцай, мерцай, звездочка,
Как я жажду узнать, кто ты!
Так высоко над миром,
Как алмаз в небе.
Совет: Текст в элементе обычно отображается браузерами моноширинным шрифтом или шрифтом фиксированной ширины, например Courier, но вы можете переопределить это с помощью CSS 9.0011 свойство шрифта .
Предыдущая страница Следующая страница
Когда недостаточно — обзор 11 примеров переноса строки в HTML и CSS
На днях я вносил изменения в копию и мне нужно было добавить разрыв строки в CTA. Когда я добрался до надежного элемента разрыва строки , у меня возникло посттравматическое воспоминание о веб-разработке начала 2000-х, когда
часто использовались для добавления вертикального интервала. Это заставило меня задуматься:
Когда неправильно использовать и следует ли вместо этого использовать
?
Должен ли я использовать CSS для оформления разрывов строк вместо HTML-элементов? Если да, то как мне это сделать?
В этом посте я расскажу о различных методах на основе HTML и CSS для создания разрывов строк в вашем тексте, а также о методах разбиения слов для достижения правильного набора текста.
Я буду использовать первую строфу стихотворения Уолта Уитмена 1865 года «О, капитан! Мой капитан!» для демонстрации каждого метода.
Разрыв строки HTML
См. перо Разрыв строки 1 Шимин Чжан (@shimin-zhang) на КодПене.
Пример 1: По умолчанию браузеры сворачивают все символы пробела HTML в один символ пробела, удаляя из содержимого все разрывы строк. Это явно неправильный выбор. Он лишает стихотворение всякого ритма.
Пример 2: У вас может возникнуть соблазн разбить каждую строку стихотворения на отдельный элемент абзаца. Это создает жесткие разрывы строк, но удаляет семантику элементов — абзац должен представлять собой целую строфу, содержащую несколько строк. Это также вводит ненужные поля и отступы между строками.
Пример 3: Это канонический вариант использования элемента разрыва строки — для разрыва строки без введения дополнительной семантики.
Однако, глядя на текст стихотворения, мы видим, что строки 5-8 содержат отступы, которые теперь удалены из вывода.
Пример 4: Предварительно отформатированный элемент сохраняет как разрывы строк, так и дополнительные символы пробела из HTML. Но
9Элемент 0012 точно сохраняет все форматы и не допускает переноса текста. Это приводит к переполнению нашего текста, что делает его более подходящим для рисунков и кодовых блоков ASCII.
Мы достигли предела того, что могут сделать для нас разрывы строк только в HTML, давайте взглянем на некоторые параметры CSS.
Разрыв строки CSS
См. перо Line Break 2 Шимин Чжан (@shimin-zhang) на КодПене.
Примеры 5 и 6: CSS-свойство white-space является основным соответствующим методом CSS для управления разрывами строк. Интересно, что в CSS есть атрибут line-break, но он касается только того, как знаки препинания ведут себя при разрыве строки для восточноазиатских языков.
Значения свойства white-space normal и pre соответствуют по умолчанию тегу соответственно.
Пример 7: Все становится интереснее, когда мы переходим к white-space: pre-line , где символы пробела по-прежнему свернуты, но символы новой строки теперь создают новые строки. Обратите внимание, что отступы от строк 5-8 все еще потеряны, как будто все символы новой строки теперь обрабатываются как .
Пример 8: white-space value pre-wrap действует как элемент , но также создает новые строки, чтобы наш текст не вытекал за пределы родительского контейнера. Это лучшее решение для разрыва строки CSS, которое у нас есть для нашего случая использования стихотворения Уитмена.
пробел имеет еще два возможных значения. nowrap отключает разрывы строк и свертывает пробелы, а break-spaces , который ведет себя как перед переносом , но обрабатывает пробелы в конце строки без зависаний.
До сих пор мы рассматривали решения, которые разбивают строки с помощью пробела или символа новой строки. Что, если мы хотим разбить строку в середине слова?
Разрыв слова
См. перо Line Break 3 Шимин Чжан (@shimin-zhang) на КодПене.
Пример 9: Каноническим HTML-решением для работы с разрывом слов является элемент возможности разрыва строки и его родственник мягкий дефис . Оба они указывают браузеру, что это место является предпочтительным местом для разрыва слов, но только в том случае, если браузер счел это необходимым.
Пример 10: Вместо того, чтобы вручную искать все возможности разрыва слов в вашей копии, вы можете использовать свойство CSS word-break со значением break-all , чтобы позволить браузеру выбирать, когда слово должно быть разбито.
для формирования новой строки. Это похоже на автоматическую вставку после каждого символа.
Пример 11: La stly, свойство CSS hyphens со значением auto может использоваться для создания определяемых браузером дефисов для разрыва слов. Это как если бы мы добавили для каждого непробельного символа в нашем тексте. На мой взгляд, этот вариант дает нам лучший набор стихотворения, мне особенно нравится, как страх разбивается на «страшный» и естественно перетекает от одной строки к другой. 9Дефис 0011: в руководстве вместо разрыва строки используется символ мягкого дефиса.
Final Word
Вот и все, 11 примеров добавления разрывов строк в текст!
Вот несколько эмпирических правил:
- В общем, используйте параметры разрыва строки в CSS, а не их HTML-эквивалент — разделение проблем между стилем и содержанием.
- Исключением из приведенного выше правила является семантический разрыв строки, например добавление тегов
