Ответ 1

Css:

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

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

line-height:22px;

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

content: " ";

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

Ответ 2

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

  br {
        line-height: 150%;
     }

Ответ 3

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

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

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

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

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

Ответ 4

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

Ответ 5

Таким образом, peeps выше получили в основном аналогичный ответ, но здесь он очень лаконичен. Работает в 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 */
}

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

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

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

Ответ 9

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

<br></br>

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

<br> or 
<br/> 

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

Ответ 10

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

Ответ 11

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

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

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

Ответ 12

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

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

Но это не работает на chrome или firefox.

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

Ответ 13

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

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

-------- Изменить ---------

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

Ответ 14

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

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

Ответ 15

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

Ответ 16

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

Работает в Firefox, Chrome и Safari. Не тестировались в Проводнике. (Windows-планшет не работает.)

Линейные разрывы, размер шрифта работают по-разному в Firefox и Safari.

Ответ 17

Кажется, вы не можете отрегулировать высоту BR, но вы можете сделать его надежным с помощью дисплея: none

Переместился по этой странице, ища решение для следующего:

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

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

Ответ 18

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

Ответ 19

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

================= Метод 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: "" }

Ответ 20

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

Ответ 21

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

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

blockquote { margin-top: 20px }

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

Ответ 22

<br> - для разрыва строки.

<br /> также относится к разрыву строки, "/" необязательно необходимо для элементов void или для xhtml.

Используя <br></br>, браузеры будут вставлять два разрыва строки для обоих "практически" одинаковыми.

Невозможно увеличить размер разрыва строки, потому что это просто разрыв строки.
Используйте div с изменчивостью, установленной на скрытый (<div style="vilibility:hidden; line-height:150%;"</div>) или еще лучше, абзац.

Ответ 23

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

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

Ответ 24

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

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

Ответ 25

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

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

Здесь представлена ​​демонстрационная страница, которая содержит некоторые другие варианты темы:

http://www.burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

Ответ 26

Используйте <div>

<div>Content 1</div>Content 2

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

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

<div>Content 1</div>Content 2

Ответ 27

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

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

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

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

Ответ 28

Я получил его для работы в 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>

Ответ 29

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

Итак, размышляя вне коробки, я изменил размер по вертикали, отрегулировав размер шрифта (в pt).

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

Ответ 30

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

пример: (html-код)

<br/ class="150%space">

(код css)

br[class='150%space']
{
   line-height: 150%;
}