Следующая строка в html: Тег HTML перенос строки, разделитель строк HTML5

Leave a Comment / Html / By /

Содержание

Как сделать или запретить перенос строки: HTML код и тег

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

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

Где используется этот тег, когда конкретно возникает неотложна необходимость вставить в текст перевод строки без создания нового абзаца? Например, это может пригодиться в оформлении контента — если у вас есть сайт со стихами и отрывками стихов, текстами песен или чем-то подобным.

Все о теге для переноса строки br

Тег br осуществляет одинарный перенос строки в HTML (что это такое описано тут) и определяется всеми браузерами. Да, чуть не забыл — если вы используете тег br, то в отличие от тега абзаца p, у вас не добавляется пустой отступ (перед строкой).

Тег br является пустым (пустой значит без содержимого, ничего не содержит), а значит его не нужно закрывать. А так как его не нужно закрывать, было придумано краткое описание — оно изначально подразумевает то, что сам тег не имеет закрывающего тега.

Представьте на минуту, что не было бы краткого описания. Что тогда? Тогда пришлось бы каждый раз «закрывать и открывать» перенос строки примерно так: <br></br>. Это как минимум неудобно. Но, тем не менее, в строгом XHTML закрывать его обязательно тегом <br />.

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

Пример:

Чтобы осуществить перенос следующего предложения на новую строку, используем тег br.
<br>
Ура, второе предложение на новой строке.

Результат:

Чтобы осуществить перенос следующего предложения на новую строку, используем тег br.

Ура, второе предложение на новой строке.

Реальный пример:

А. Блок<br>
Ночь, улица, фонарь, аптека,<br>
Бессмысленный и тусклый свет.<br>
Живи еще хоть четверть века —<br>
Все будет так. Исхода нет.<br><br>
Умрешь — начнешь опять сначала<br>
И повторится все, как встарь:<br>
Ночь, ледяная рябь канала,<br>
Аптека, улица, фонарь.

Результат:

А. Блок

Ночь, улица, фонарь, аптека,
Бессмысленный и тусклый свет.
Живи еще хоть четверть века —
Все будет так. Исхода нет.

Умрешь — начнешь опять сначала
И повторится все, как встарь:
Ночь, ледяная рябь канала,
Аптека, улица, фонарь.

Как выглядит:

Зачем придумали тег br?

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

Почему не выйдет? Потому что любое количество пробелов будет считаться браузером как один пробел, а не перенос строки — браузер автоматически удаляет лишние пробелы. Для этого и нужен перенос строк.

Читайте также: Как сделать пробел в HTML: https://blogwork.ru/probel-v-html/.

Но не стоит злоупотреблять тегом <br>, чтобы все больше и больше увеличивать расстояние между строками — для этого лучше всего воспользоваться базовыми инструментами HTML+CSS. Недопустимо создание новых абзацев или «как бы абзацев» (это считается плохим подходом) — только перенос строки!

Чтобы создавать и размечать абзацы вам следует пользоваться тегом p, а чтобы увеличить имеющееся расстояние между абзацами — измените каскадные таблицы стилей, например добавьте:

margin-top: 40 px;

Бонус — br clear

А как сделать так чтобы текст, в котором вы поставили перенос строки, не обтекал плавающий элемент (это либо изображение с установленным align, либо элемент со свойством float), а начинался ниже элемента? Для этого можно использовать атрибут clear.

Допустим, у нас есть изображение выровненное по левому краю (align=»left»). Если мы установим <br clear=»all»> или <br clear=»left»>, то текст после тега <br> (следующая строка, которую мы и переносим) будет отображаться как надо, ниже рисунка. Другие значения атрибута clear тега <br> сделают так, чтобы текст обтекал рисунок, расположившись справа от него.

Использование этого специфичного атрибута не приветствуется спецификацией HTML — такой код будет невалидным.

Кстати, рекомендуем прочесть: Как вставить изображение в HTML.

БОНУС — тег-разделитель hr

Тег <hr> тоже одиночный, но, в отличие от <br>, он используется для создания горизонтального разделителя в виде линии. Более того, внешний вид этой линии мы можем задавать при помощи атрибутов. Но, конечно же, лучше это делать проверенными методами через CSS (что это такое, читайте здесь).

БОНУС — запрет переноса на новую строку с тегом nobr

Бывает и так, что мы хотим запретит перенос строки и избежать перевода на новую строку текста: либо между двумя конкретными словами, либо в целом абзаце. Что делать? Использовать тег <nobr>Ваш текст</nobr>. Как выглядит на практике? Вот так:

Что делает тег <nobr>? Он говорит браузеру — отображай текст внутри тега без переносов, одной строкой. И, если текст длинный, тогда у нас появится некрасивая и длинная горизонтальная полоса прокрутки, а пользователи должны будут прокрутить текст по горизонтали, чтобы прочитать его полностью.

Как мы понимаем, это очень неудобно. Но тег есть!

Итоги — использование br, nobr, hr, p в HTML

Подводя итог, резюмирую содержание статьи:

  • тег <p> — для того чтобы разделять абзацы
  • тег <br> — для того чтобы перенести строку внутри абзаца (недопустимо «создание абзацев» при помощи этого тега или злоупотребление им)
  • тег <hr> — для создания горизонтальной линии-разделителя
  • тег <nobr> — для запрета переноса строк в HTML

html — Перенос на новую строку input и label вне тэга form

Вопрос задан

Изменён 11 лет 4 месяца назад

Просмотрен 24k раз

Имеется код:

<input type="checkbox" />
<label for="msword-check">Word - Текстовый процессор</label>
<input type="checkbox" />
<label for="msexcel-check">Excel - Редактор электронных таблиц</label>

Хочется перенос строк после метки, а писать br некрасиво. Что порекомендуете?

  • html
  • css

6

С <form> или без него разницы ни какой. Можно сделать (вариант 1):

<style>
    .check-label {
        display: block;
    }
</style>
<label for="msword-check">
    <input type="checkbox" />
    Word - Текстовый процессор
</label>
<label for="msexcel-check">
    <input type="checkbox" />
    Excel - Редактор электронных таблиц
</label>

Или, вариант 2 (достаточно мутный, так как float:left для inline элементов н всегда хорошо работает):

<style>
    .check-button {
        clear: left;
        float: left;
    }
</style>
<input type="checkbox" />
<label for="msword-check">Word - Текстовый процессор</label>
<input type="checkbox" />
<label for="msexcel-check">Excel - Редактор электронных таблиц</label>
<br clear="left" />

6

Можно закатать весь код в PRE: <pre> <Input > <Input > <Label> </pre>

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как сделать разрыв строки из css без использования ?

спросил

Изменено 4 месяца назад

Просмотрено 1,4 млн раз

Как добиться такого же результата без
?

 
привет 
 Как дела

вывод: 

привет
Как вы
  • html
  • css
  • разрывы строк

Вы можете использовать пробел : pre; , чтобы элементы действовали как 

  , что сохраняет новые строки. Пример: 
 
 п {
  пробел: предварительно;
} 
 
привет
Как дела?
 
 Примечание для IE: это работает только в IE8+.
 4
 Невозможно с одинаковой структурой HTML, у вас должно быть что-то, чтобы различать  Привет  и  Как дела  .
 Я предлагаю использовать  span  s, которые вы затем будете отображать в виде блоков (точно так же, как 
  на самом деле).
 п пролет {
  дисплей: блок;
} 
 
приветКак дела
 
 8
 Используйте 
 
  как обычно, но скройте его с помощью  display: none , когда он вам не нужен.
 Я ожидаю, что большинство людей, которые найдут этот вопрос, захотят использовать css / адаптивный дизайн, чтобы решить, появляется ли разрыв строки в определенном месте.
  (и не имейте ничего личного против  
  )
 Хотя это и не очевидно сразу, вы можете применить  display:none  к тегу  
 , чтобы скрыть его, что позволяет использовать медиа-запросы в тандеме с семантическими тегами BR.
 <дел>
  Быстрая коричневая лиса

  перепрыгивает через ленивую собаку



 @экран мультимедиа и (минимальная ширина: 20em) {
  бр {
    дисплей: нет; /* скрываем тег BR для более широких экранов (т.е. отключаем перенос строки) */
  }
}

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

пример jsfiddle

7

Существует несколько вариантов определения обработки пробелов и разрывов строк. Если можно поместить содержимое, например.

тег довольно легко получить все, что угодно.

Для сохранения разрывов строк, но не пробелов, используйте до строки (не до ), например: