У меня есть большой абзац текста, который разделен на подпункты с <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, я также кратко описал Googled и Stack Overflow-ed, но не нашел никакого решения. Возможно ли это даже без изменения макета?
Css:
br {
display: block;
margin: 10px 0;
}
Решение, вероятно, не совместимо с кросс-браузером, но это как минимум. Также рассмотрите установку line-height:
line-height:22px;
Для Google Chrome рассмотрите настройку content:
content: " ";
Кроме того, я думаю, что вы застряли в решении JavaScript.
Вот правильное решение, которое на самом деле поддерживает кросс-браузер:
br {
line-height: 150%;
}
Другой способ - использовать HR. Но, и здесь хитрая часть, сделайте ее невидимой.
Таким образом:
<hr style="height:30pt; visibility:hidden;" />
Чтобы сделать более чистый разрыв BR, смоделированный с использованием HR: Btw работает во всех браузерах!
{ height:2px; visibility:hidden; margin-bottom:-1px; }
Насколько я знаю, <br> не имеет высоты, он просто заставляет разрыв строки. То, что у вас есть, - это текст с некоторыми разрывами строк в дополнение к автозаверяющим, а не подпараграфам. Вы можете изменить интервал между строками, но это повлияет на все строки.
Таким образом, 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 */
}
У меня была эта проблема, и я обошел ее, используя
<div style="line-height:150%;">
<br>
</div>
вы можете применить высоту строки к этому элементу <p>, поэтому линии становятся больше.
Я еще не пробовал псевдоэлемент :before/:after CSS2 CSS2, главным образом потому, что он поддерживается только в IE8 (это касается браузеров IE). Это может быть единственным возможным решением CSS:
br:before {
display: block;
margin-top: 10px;
content: "";
}
Вот пример на QuirksMode.
Интересно, что если тег разрыва записывается в виде полной формы следующим образом:
<br></br>
тогда работает CSS-высота: 145%. Если тег разрыва написан как:
<br> or
<br/>
то это не работает, по крайней мере, в Chrome, IE и firefox. Weird!
И помните, что (неверно) с использованием тега <hr>, как предложено где-то, закончит тег <p>, поэтому забудьте об этом решении.
Если f.ex. что-то написано на окружающем <p>, этот стиль ушел для остальной части содержимого после вставки <hr>.
Майкл и йода оба правы. Вы можете использовать тег <p>, который, будучи блочным тегом, использует нижний предел для смещения следующего блока, поэтому вы можете сделать что-то похожее на это, чтобы получить больший интервал:
<p>
A block of text.
</p>
<p>
Another block
</p>
Другой альтернативой является использование тега block <hr>, с помощью которого вы можете явно определить высоту интервала.
У меня возникла мысль, что вы можете использовать:
br:after {
content: ".";
visibility: hidden;
display: block;
}
Но это не работает на chrome или firefox.
Просто подумал, что я упомянул, что в случае, если это произойдет с кем-то еще, и я избавлю их от неприятностей.
Что работает для меня, это добавить этот встроенный текст между тегами абзаца... но не лучшим решением.
<br style="line-height:32px">
-------- Изменить ---------
Я столкнулся с проблемами с ПК /Mac с этим... Он придает тексту новую высоту строки, но не делает перерыв линии... Возможно, вы захотите сделать некоторые тесты самостоятельно. Извините!
Вот решение, которое работает в IE, Firefox и Chrome. Идея состоит в том, чтобы увеличить размер шрифта элемента br от размера тела 14px до 18px и опустить элемент на 4px, чтобы дополнительный размер был ниже текстовой строки. Результат - 4px дополнительных пробелов ниже br.
br
{
font-size: 18px;
vertical-align: -4px;
}
<br /> займет столько места, сколько заполнено текстом в строке <p>, вы не сможете это изменить. Если вы хотите увеличить, это означает, что вы хотите разделить на абзац, поэтому добавьте еще <p>. Не забывайте, что это самая семантическая возможность;)
br {
content: "";
margin: 2em;
display: block;
margin-bottom: -20px;
}
Работает в Firefox, Chrome и Safari. Не тестировались в Проводнике. (Windows-планшет не работает.)
Линейные разрывы, размер шрифта работают по-разному в Firefox и Safari.
Кажется, вы не можете отрегулировать высоту BR, но вы можете сделать его надежным с помощью дисплея: none
Переместился по этой странице, ища решение для следующего:
У меня есть ситуация, когда сторонний платежный шлюз (Worldpay) позволяет вам настраивать свои страницы платежей с максимальным размером 10k CSS и HTML (без script), которые вводятся в тело их шаблона, и после нескольких BR, FONT и т.д. В сочетании с DTD, который заставляет IE7/8 в режиме Quirks, это делает настройку кросс-браузера так же трудно, как и она!
Отключение BR делает вещи намного более последовательными...
Попробуйте использовать атрибут CSS line-height в тэге p, который содержит тег br. Помните, что вы можете id использовать теги p, если хотите изолировать его, хотя лучше использовать div для изоляции, IMO.
i Используйте эти методы, но я не знаю, если кросс-браузер
br {
display:none;
}
ИЛИ
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;
}
ИЛИ
br:after { content: "" }
br { content: "" }
Извините, если кто-то еще сказал об этом, но простое решение - поиграть с вашей "линией высоты". Если вы используете слишком много места при использовании разрыва строки, это просто потому, что у вас слишком высокая высота линии. Вы можете исправить это в CSS (но знаете, что это повлияет на все, что использует это свойство), или вы можете сделать встроенный стиль, чтобы переопределить CSS.
вы также можете использовать свойство "block-quote" в CSS. Это сделает так, чтобы он не влиял на ваши отдельные строки, но позволяет вам устанавливать параметры только для разрывов между абзацами или "кавычками".
UPDATE:
Я стою исправлено. "blockquote" на самом деле является свойством html. Вы используете его так же, как <p> и </p> вокруг вашей работы. Затем вы можете установить параметры для цитаты блока в css, например
blockquote { margin-top: 20px }
Надеюсь, это поможет. Он аналогичен настройке параметров на br и может быть или не быть совместимым с браузером.
<br> - для разрыва строки. <br /> также относится к разрыву строки, "/" необязательно необходимо для элементов void или для xhtml.
Используя <br></br>, браузеры будут вставлять два разрыва строки для обоих "практически" одинаковыми.
Невозможно увеличить размер разрыва строки, потому что это просто разрыв строки.
Используйте div с изменчивостью, установленной на скрытый (<div style="vilibility:hidden; line-height:150%;"</div>) или еще лучше, абзац.
<span style="line-height:40px;"><br></span>
Вам нужно будет сделать это inline и для каждого элемента, но он должен работать на большинстве браузеров Скрипт с высотой линии, чтобы получить желаемый эффект. Если вы сделаете его встроенным для каждого элемента, он должен работать в большинстве браузеров и электронной почты (но это слишком сложно для обсуждения здесь).
Это сделало трюк для меня, когда я не мог заставить интервал стиля работать из тега span:
<p style='margin-bottom: 5px' >
<span>I Agree</span>
</p>
<span>I Don't Agree</span>
Если цель состоит в том, чтобы добавить немного лишнего вертикального пространства после тега <br>, не нарушая логический абзац, что-то вроде этого будет делать трюк. Он отлично работает во всех браузерах:
<span style="vertical-align:-37%"> </span><br>
Здесь представлена демонстрационная страница, которая содержит некоторые другие варианты темы:
http://www.burtonsys.com/a_little_extra_vertical_space_for_br_tag.html
Используйте <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>
Мне пришлось разработать решение для преобразования HTML в PDF и вертикально центрировать текст в ячейках таблицы, но ничего не работало, кроме ввода простого <br>
Итак, размышляя вне коробки, я изменил размер по вертикали, отрегулировав размер шрифта (в pt).
<font style="font-size: 4pt"><br></font>
Возможно, вы нашли решение очень простым, вам нужно всего лишь создать другой тип
. Кажется, я работал на меня.
пример: (html-код)
<br/ class="150%space">
(код css)
br[class='150%space']
{
line-height: 150%;
}