Как изменить высоту <br>?

Question

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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

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

Answer 3

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

Answer 4

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

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

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

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

Answer 5

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

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

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

Answer 6

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

Answer 7

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

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

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

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

Answer 8

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

UPDATE:
Я стою исправлено. "blockquote" на самом деле является свойством html. Вы используете его так же, как

и

в своей работе. Затем вы можете установить параметры для вашего блочного предложения в css, например

blockquote { margin-top: 20px }

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

Answer 9

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

Answer 10

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

================= Способ 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: "" }