Подтвердить что ты не робот

Изменить высоту <br> с помощью CSS

Я видел вопрос здесь о том же самом, но я не могу получить ответы на какие-либо вопросы (по крайней мере, в Chrome).

Этот вопрос только для <br>, я знаю множество других методов для изменения высоты, но в этом случае я не могу изменить HTML.

bla<BR><BR>bla<BR>bla<BR><BR>bla

CSS:

br {
    display: block;
    margin-bottom: 2px;
    font-size:2px;
    line-height: 2px;
}

Желаемый эффект: меньшая высота между строками.

Единственное, что я могу заставить работать - это display:none, но тогда все разрывы строк удаляются.

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

4b9b3361

ОТВЕТЫ

Ответ 1

Вы не можете изменить высоту самого тега br, так как это не элемент, занимающий место на странице. Это просто инструкция для создания новой строки.

Вы можете изменить высоту линии, используя стиль line-height. Это изменит расстояние между текстовыми блоками, которые вы разделили пустыми строками, но нагло также расстояние между строками в текстовом блоке.

Для полноты: текстовые блоки в HTML обычно выполняются с использованием тега p вокруг текстовых блоков. Таким образом, вы можете контролировать высоту строки внутри тега p, а также расстояние между тегами p.

Ответ 2

Это чувствует себя очень взломанным, но в chrome 41 на ubuntu я могу сделать <br> слегка стильным:

br {
  content: "";
  margin: 2em;
  display: block;
  font-size: 24%;
}

Я управляю интервалом с размером шрифта.

Ответ 3

Посмотрите на свойство line-height. Попытка стирать тег <br> не является ответом.

Пример:

<p id="single-spaced">
    This<br>
    text<br>
    is<br>
    single-spaced.
</p>
<p id="double-spaced" style="line-height: 200%;">
    This<br>
    text<br>
    is<br>
    double-spaced.
</p>

Ответ 4

Высота строки тега br может отличаться от высоты строки остальной части текста внутри текста абзаца путем установки размера шрифта для тега br.

Пример: br { font-size: 200%; }

Ответ 5

Вы можете управлять высотой <br>, если вы положите ее на высоту, ограниченную div. Попробуйте:

<div style="height:2px;"><br></div>

Ответ 6

Используйте свойство content и создавайте этот контент. Затем поведение контента настраивается с использованием псевдо элементов. Псевдоэлементы:: before и:: после работы в Mac Safari 10.0.3.

Здесь содержимое элемента br используется как элемент привязки для элемента br:: после содержимого. Элемент br - это расстояние между Br. br:: after - это место, где br:: после того, как содержимое может отображаться и стилизоваться. Выглядит неплохо, но не 2px <br> .

br { content: ""; display: block; margin: 1rem 0; }
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; }

Свойство str-height элемента br игнорируется. Если отрицательные значения применяются к одному или обеим селекторам, чтобы отображать вертикальные метки "lift" to br, а затем корректировать вертикальный интервал, но отображаемые пошаговые отступы отображают содержимое после каждого ярлыка br. Отступ точно равен количеству, которое поднимается от фактической типографской линии-высоты. Если вы догадаетесь о правильном подъеме, нет отступов, а есть одна линия сложения, точно равная высоте исходного глифа, зажатой между предыдущей и следующей строками.

Кроме того, трейлинг-тег br приведет к тому, что следующий тег отображения html наследует br: после стилизации содержимого. Кроме того, псевдоэлементы вызывают <br> < & шир GT; чтобы интерпретироваться как единичный <br> . Хотя псевдокласс br: активный вызывает каждый <br> для интерпретации отдельно. Наконец, использование команды br: active игнорирует псевдоэлемент br: после и всех br: активный стиль. Итак, все, что требуется:

br:active { }

что не помогает для создания 2px high <br> дисплей. А вот псевдокласс: активный игнорируется!

br:active { content: ""; display: block; margin: 1.25em 0; }
br { content: ""; display: block; margin: 1rem; }
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; }

Это решение partial. Псевдо-класс и псевдоэлемент могут обеспечить решение, если оно будет изменено. Это может быть частью решения CSS. (У меня есть только Safari, попробуйте его в других браузерах.)

Изучите веб-разработку: псевдо-классы и псевдоэлементы

Обратите внимание на глобальные элементы - BR на Mozilla.org

Ответ 7

BR - это не что-то особенное: это все еще допустимый тег XML, которому вы можете присвоить атрибуты. Например, вам не нужно заключать его в интервал, чтобы изменить высоту строки, скорее вы можете применить высоту строки непосредственно к элементу.

Вы можете сделать это с помощью встроенного CSS: 

This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br style="line-height:40vh"/>
break!

Ответ 8

Высота строки <br> может отличаться от высоты строки остальной части текста внутри <p>. Вы можете контролировать высоту строки ваших тегов <br> независимо от остальной части текста, включив два из них в стиле <span>, который был создан в стиле. Используйте свойство line-height css, как предложили другие.

<p class="normalLineHeight">
  Lots of text here which will display on several lines with normal line height if you put it in a narrow container...
  <span class="customLineHeight"><br><br></span>
  After a custom break, this text will again display on several lines with normal line height...
</p>

Ответ 9

<font size="4"> <font color="#ffe680">something here</font><br>

Я пробовал все эти методы, но большинство из них не работали должным образом для меня, в конце концов я случайно сделал это, и он прекрасно работает, он работает на Chrome и Safari (единственные вещи, на которых я тестировал). Замените цветовой код своим фоновым цветным кодом, и текст будет невидимым. Вы также можете настроить размер шрифта, чтобы сделать разрыв строки больше или меньше в зависимости от вашего желания. Это действительно просто.

Ответ 10

Так как "поле" не работает в Chrome, поэтому я и использовал "бордюр".

br {
  display: block;
  content: "";
  border-bottom: 10px solid transparent; // Works in Chrome/Safari
}
@-moz-document url-prefix() {
  br {
    margin-bottom: 10px; // As 'border-bottom' does not work in firefox and 'margin-bottom' does not work in Chrome/Safari.
  }
}