У меня есть большой абзац текста, который разделен на подпункты с <br>:

<p>
  Blah blah blah.
  <br/>
  Blah blah blah. Blah blah blah. Blah blah blah.
  <br/>
  Blah blah blah.
</p>

Я хочу увеличить разрыв между этими подпунктами, как будто есть два <br>или что-то в этом роде. Я знаю, что правильный способ сделать это - использовать <p></p>, но сейчас я не могу изменить этот макет, поэтому я ищу решение только для CSS.

Я пробовал настройку <br>«s line-heightи heightс display: block, я также Гуглом и Stack Overflow-й изд кратко, но не нашел никакого решения. Возможно ли это даже без изменения макета?

Css:

br {
   display: block;
   margin: 10px 0;
}

Решение, вероятно, не совместимо с разными браузерами, но это как минимум. Также рассмотрите установку line-height:

line-height:22px;

Для Google Chrome рассмотрите настройку content:

content: " ";

Кроме этого, я думаю, что вы застряли с решением JavaScript.

Вот правильное решение, которое фактически поддерживает кросс-браузер:

  br {
        line-height: 150%;
     }

Итак, взгляды выше получили в основном аналогичный ответ, но здесь он очень лаконичен. Работает в Opera, Chrome, Safari & Firefox, скорее всего IE тоже?

br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 0; /* change this to whatever height you want it */
}

Другой способ - использовать HR . Но, и здесь есть хитрость, сделайте ее невидимой.

Таким образом:

<hr style="height:30pt; visibility:hidden;" />

Чтобы сделать чище перерыв BR, смоделированный с помощью HR: Btw работает во всех браузерах !!

{ height:2px; visibility:hidden; margin-bottom:-1px; }

Насколько я знаю <br>, не имеет высоты, это просто вызывает разрыв строки. У вас есть текст с некоторыми переносами строк в дополнение к автоматическим переносам, а не подпункты. Вы можете изменить межстрочный интервал, но это повлияет на все строки.

У меня просто была эта проблема, и я обошел ее, используя

<div style="line-height:150%;">
    <br>
</div>

Вы можете применить высоту строки к этому <p>элементу, чтобы линии стали больше.

Я не пробовал псевдоэлемент :before/ :afterCSS2 прежде, в основном потому, что он поддерживается только в IE8 (это касается браузеров IE) . Это может быть единственно возможным решением CSS:

br:before {
    display: block;
    margin-top: 10px;
    content: "";
}

Вот пример на QuirksMode .

У меня была мысль, что вы могли бы использовать:

br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

Но это не сработало на Chrome или Firefox.

Просто подумал, что упомяну это, если это случится с кем-то еще, и я избавлю их от неприятностей.

br {   
    content: "";
    margin: 2em;
    display: block;
    margin-bottom: -20px; 
 }

Работает в Firefox, Chrome & Safari. Не проверял в Проводнике. (Windows-планшет выключен.)

Разрывы строк, размер шрифта работает по-разному в Firefox и Safari.

Интересно, что если тег разрыва записан в полной форме следующим образом:

<br></br>

тогда CSS-высота строки: 145% работает. Если тег разрыва записывается как:

<br> or 
<br/> 

тогда это не работает, по крайней мере, в Chrome, IE и Firefox. Weird!

Что работает для меня, так это добавление этой строки между тегами абзаца ... но это не лучшее решение.

<br style="line-height:32px">

-------- Редактировать ---------

Я столкнулся с проблемами с ПК / Mac с этим ... Он дает тексту новую высоту строки, но не делает разрыв строки ... Вы можете захотеть сделать некоторые тесты самостоятельно. Сожалею!

И помните, что (неправильное) использование <hr>тега, как предложено где-то, приведет к его завершению <p>, поэтому забудьте об этом решении.
Если, например, что-то стилизовано для окружения <p>, этот стиль исчезает для остальной части содержимого после <hr>вставки.

Вот решение, которое работает в IE, Firefox и Chrome. Идея состоит в том, чтобы увеличить размер шрифта элемента br с размера тела от 14 до 18 пикселей и уменьшить элемент на 4 пикселя, чтобы дополнительный размер находился ниже текстовой строки. Результатом является 4px дополнительного пробела ниже br.

br 
{ 
font-size: 18px; 
vertical-align: -4px; 
}  

ОБНОВЛЕНО 13 сентября 2019 года:

Я использую, <br class=big>чтобы сделать разрыв строки слишком большого размера, когда мне это нужно. До сегодняшнего дня я делал это так:

br.big {line-height:190%;vertical-align:top}

(The vertical-align:top было необходимо только для IE и Edge.)

Это работало во всех основных браузерах, которые я пробовал: Chrome, Firefox, Opera, Brave, PaleMoon, Edge и IE11.

Однако недавно он перестал работать в браузерах на основе Chrome : мои «большие» разрывы строк превратились в разрывы строк обычного размера.

(Я не знаю точно, когда они сломали его. По состоянию на 12 сентября 2019 года он все еще работает в моем устаревшем Chromium Portable 55.0.2883.11, но он не работает в Opera 63.0.3368.71 и Chrome 76.0.3809.132 (оба Windows и Android).)

После некоторых проб и ошибок я получил следующую замену, которая работает в текущих версиях всех этих браузеров:

br.big {display:block; content:""; margin-top:0.5em; line-height:190%; vertical-align:top;}

Ноты:

line-height:190% работает во всем, кроме последних версий браузеров на базе Chrome.

vertical-align:top необходим для IE и Edge (в сочетании с line-height:190% ), чтобы получить дополнительное пространство после предыдущей строки, где оно принадлежит, а не частично до и частично после.

display:block;content:"";margin-top:0.5em работает в Chrome, Opera и Firefox, но не в Edge & IE.

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

<span style="vertical-align:-37%"> </span><br>

(Вы можете, конечно, отрегулировать «-37%» по мере необходимости для большего или меньшего разрыва.) Вот демонстрационная страница, которая включает в себя некоторые другие варианты темы:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html



28 мая 2020 г .:

Я обновил демонстрационную страницу; теперь он демонстрирует все вышеперечисленные методы:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

Майкл и Йода оба правы. Что вы можете сделать, это использовать <p>тег, который, будучи тегом блока, использует нижнее поле для смещения следующего блока, так что вы можете сделать что-то похожее на это, чтобы увеличить интервал:

<p>
    A block of text.
</p>
<p>
    Another block
</p>

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

<br />займет столько же места, сколько текстовая строка вашего <p>, вы не можете это изменить. Если вы хотите больше, это означает, что вы хотите разделить на абзацы, поэтому добавьте другие <p>. Не забудьте быть самой семантической из всех, что вы можете

Вы также можете использовать свойство "block-quote" в CSS. Это сделало бы так, чтобы это не влияло на ваши отдельные строки, но позволяло вам устанавливать параметры только для разрывов между абзацами или «блочных кавычек».

ОБНОВЛЕНИЕ:
я стою исправлено. "blockquote" на самом деле является свойством html. Вы используете его так же, как <p> и </ p> в своей работе. Затем вы можете установить параметры для вашей цитаты блока в css, как

blockquote { margin-top: 20px }

Надеюсь это поможет. Это похоже на настройку параметров на BR и может быть или не быть кросс-браузер совместимым.

Кажется, вы не можете отрегулировать высоту БР, но вы можете сделать так, чтобы она надежно исчезла с помощью дисплея: нет

Наткнулся на эту страницу при поиске решения по следующему:

У меня есть ситуация, когда сторонний платежный шлюз (Worldpay) позволяет вам настраивать их платежные страницы максимум с 10k CSS и HTML (сценарий не разрешен), которые вставляются в тело их шаблона, а также после нескольких BR, тегов FONT и т. Д. В сочетании с DTD, который переводит IE7 / 8 в режим Quirks, кросс-браузерная настройка становится настолько сложной, насколько это возможно!

Отключение BR делает вещи более последовательными ...

Я использую эти методы, но я не знаю, если кросс-браузер

================= Метод 1 ==================

br {
    display:none;
}

ИЛИ

================= Метод 2 ==================

br {
    display: block;
    margin-bottom: 2px;
    font-size:2px;
    line-height: 2px;
}
br:before {
    display: block;
    margin-top: 2px;
    content: "";
}
br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

ИЛИ

================= Метод 3 ==================

br:after { content: "" }
br { content: "" }

Попробуйте использовать line-heightатрибут CSS в вашем pтеге, который содержит этот brтег. Помните, что вы можете использовать idсвои pтеги, если хотите изолировать их, хотя, возможно, лучше использовать divдля изоляции IMO.

Извините, если кто-то уже сказал это, но простое решение - поиграть с вашей "высотой строки". Если вы используете слишком много места, когда используете разрыв строки, это просто потому, что у вас слишком высокая высота строки. Вы можете исправить это в CSS (но знайте, что это повлияет на все, что использует это свойство) или вы можете использовать встроенный стиль для переопределения CSS.

Мне пришлось разработать решение для преобразования HTML в PDF и вертикального центрирования текста в ячейках таблицы, но ничего не получалось, кроме ввода простого <br>

Поэтому, не задумываясь, я изменил размер по вертикали, настроив размер шрифта (в pt).

<font style="font-size: 4pt"><br></font>

<span style="line-height:40px;"><br></span> 

Вы должны сделать это встроенным и для каждого
элемента, но он должен работать в большинстве браузеров Fiddle с высотой строки, чтобы получить желаемый эффект. Если вы сделаете его встроенным для каждого элемента, он должен работать в большинстве браузеров и электронной почты (но это слишком сложно для обсуждения здесь).

Это помогло мне, когда я не смог заставить интервал стилей работать из тега span:

        <p style='margin-bottom: 5px' >
            <span>I Agree</span>
        </p>
        <span>I Don't Agree</span>

использование <div>

<div>Content 1</div>Content 2

Это позволяет новую линию без вертикального пробела.

Это становится

<div>Content 1</div>Content 2

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

br {
    content: " ";
    display: block;
}

Для решения конкретной проблемы я должен был иметь определенное расстояние между строками. Я добавил поле сверху и снизу.

br {
    content: " ";
    display: block;
    margin: 0.25em 0;
}

Я заставил его работать в IE7, используя комбинацию решений, но в основном упаковывая Br в DIV, как предлагали Найджел и другие. Добавил Id и запустил at = "server", чтобы я мог удалить BR при удалении флажка из ряда флажков.

.narrow {
    display: block;
    margin: 0px;
    line-height: 0px;
    content: " "; 
}

<div class="narrow" run at="server"><br></br></div>

Возможно, использование двух тегов br - самое простое решение, которое работает со всеми браузерами. Но это повторяется.

<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>

Как насчет простого добавления абзаца вместо разрыва строки, например,

бла ла ля бла бла абла ля ля бла бла абла ля ля бла бла

Затем вы можете указать высоту строки или отступы или что-то для этого р