У меня есть большой абзац текста, который разделен на подпункты с <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-й изд кратко, но не нашел никакого решения. Возможно ли это даже без изменения макета?
<p>
теги не могут содержать<div>
теги, см. Этот постОтветы:
Css:
Решение, вероятно, не совместимо с разными браузерами, но это как минимум. Также рассмотрите установку
line-height
:Для Google Chrome рассмотрите настройку
content
:Кроме этого, я думаю, что вы застряли с решением JavaScript.
источник
margin-top: 10px;
content:" "
атрибут к этому стилю, и он отлично работает в Chromeline-height
. В конце концов это что-то вродеbr { display:block; margin-top:10px; line-height:22px; }
.margin:10px 0 0
для тех, кто не хочет, чтобы это было в два раза больше.margin-top: 10px;
, все еще не работал ....Вот правильное решение, которое фактически поддерживает кросс-браузер:
источник
Итак, взгляды выше получили в основном аналогичный ответ, но здесь он очень лаконичен. Работает в Opera, Chrome, Safari & Firefox, скорее всего IE тоже?
источник
Другой способ - использовать HR . Но, и здесь есть хитрость, сделайте ее невидимой.
Таким образом:
Чтобы сделать чище перерыв BR, смоделированный с помощью HR: Btw работает во всех браузерах !!
источник
<p></p>
с полями, а не уничтожать<hr />
Насколько я знаю
<br>
, не имеет высоты, это просто вызывает разрыв строки. У вас есть текст с некоторыми переносами строк в дополнение к автоматическим переносам, а не подпункты. Вы можете изменить межстрочный интервал, но это повлияет на все строки.источник
content
свойства делает свое дело.У меня просто была эта проблема, и я обошел ее, используя
источник
Вы можете применить высоту строки к этому
<p>
элементу, чтобы линии стали больше.источник
<br>
тегу, то принудительные разрывы строк будут больше, чемЯ не пробовал псевдоэлемент
:before
/:after
CSS2 прежде, в основном потому, что он поддерживается только в IE8 (это касается браузеров IE) . Это может быть единственно возможным решением CSS:Вот пример на QuirksMode .
источник
У меня была мысль, что вы могли бы использовать:
Но это не сработало на Chrome или Firefox.
Просто подумал, что упомяну это, если это случится с кем-то еще, и я избавлю их от неприятностей.
источник
Работает в Firefox, Chrome & Safari. Не проверял в Проводнике. (Windows-планшет выключен.)
Разрывы строк, размер шрифта работает по-разному в Firefox и Safari.
источник
Интересно, что если тег разрыва записан в полной форме следующим образом:
тогда CSS-высота строки: 145% работает. Если тег разрыва записывается как:
тогда это не работает, по крайней мере, в Chrome, IE и Firefox. Weird!
источник
Что работает для меня, так это добавление этой строки между тегами абзаца ... но это не лучшее решение.
-------- Редактировать ---------
Я столкнулся с проблемами с ПК / Mac с этим ... Он дает тексту новую высоту строки, но не делает разрыв строки ... Вы можете захотеть сделать некоторые тесты самостоятельно. Сожалею!
источник
И помните, что (неправильное) использование
<hr>
тега, как предложено где-то, приведет к его завершению<p>
, поэтому забудьте об этом решении.Если, например, что-то стилизовано для окружения
<p>
, этот стиль исчезает для остальной части содержимого после<hr>
вставки.источник
Вот решение, которое работает в IE, Firefox и Chrome. Идея состоит в том, чтобы увеличить размер шрифта элемента br с размера тела от 14 до 18 пикселей и уменьшить элемент на 4 пикселя, чтобы дополнительный размер находился ниже текстовой строки. Результатом является 4px дополнительного пробела ниже br.
источник
vertical-align
Кажется, просто использование трюка сbr
тегом. Я проверял это на IE 11.ОБНОВЛЕНО 13 сентября 2019 года:
Я использую,
<br class=big>
чтобы сделать разрыв строки слишком большого размера, когда мне это нужно. До сегодняшнего дня я делал это так:(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).)
После некоторых проб и ошибок я получил следующую замену, которая работает в текущих версиях всех этих браузеров:
Ноты:
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, заключается в следующем. Работает нормально во всех браузерах:(Вы можете, конечно, отрегулировать «-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>
тег, который, будучи тегом блока, использует нижнее поле для смещения следующего блока, так что вы можете сделать что-то похожее на это, чтобы увеличить интервал:Другой альтернативой является использование
<hr>
тега блока , с помощью которого вы можете явно определить высоту интервала.источник
<br />
займет столько же места, сколько текстовая строка вашего<p>
, вы не можете это изменить. Если вы хотите больше, это означает, что вы хотите разделить на абзацы, поэтому добавьте другие<p>
. Не забудьте быть самой семантической из всех, что вы можетеисточник
Вы также можете использовать свойство "block-quote" в CSS. Это сделало бы так, чтобы это не влияло на ваши отдельные строки, но позволяло вам устанавливать параметры только для разрывов между абзацами или «блочных кавычек».
ОБНОВЛЕНИЕ:
я стою исправлено. "blockquote" на самом деле является свойством html. Вы используете его так же, как <p> и </ p> в своей работе. Затем вы можете установить параметры для вашей цитаты блока в css, как
Надеюсь это поможет. Это похоже на настройку параметров на BR и может быть или не быть кросс-браузер совместимым.
источник
Кажется, вы не можете отрегулировать высоту БР, но вы можете сделать так, чтобы она надежно исчезла с помощью дисплея: нет
Наткнулся на эту страницу при поиске решения по следующему:
У меня есть ситуация, когда сторонний платежный шлюз (Worldpay) позволяет вам настраивать их платежные страницы максимум с 10k CSS и HTML (сценарий не разрешен), которые вставляются в тело их шаблона, а также после нескольких BR, тегов FONT и т. Д. В сочетании с DTD, который переводит IE7 / 8 в режим Quirks, кросс-браузерная настройка становится настолько сложной, насколько это возможно!
Отключение BR делает вещи более последовательными ...
источник
Я использую эти методы, но я не знаю, если кросс-браузер
================= Метод 1 ==================
ИЛИ
================= Метод 2 ==================
ИЛИ
================= Метод 3 ==================
источник
Попробуйте использовать
line-height
атрибут CSS в вашемp
теге, который содержит этотbr
тег. Помните, что вы можете использоватьid
своиp
теги, если хотите изолировать их, хотя, возможно, лучше использоватьdiv
для изоляции IMO.источник
Извините, если кто-то уже сказал это, но простое решение - поиграть с вашей "высотой строки". Если вы используете слишком много места, когда используете разрыв строки, это просто потому, что у вас слишком высокая высота строки. Вы можете исправить это в CSS (но знайте, что это повлияет на все, что использует это свойство) или вы можете использовать встроенный стиль для переопределения CSS.
источник
Мне пришлось разработать решение для преобразования HTML в PDF и вертикального центрирования текста в ячейках таблицы, но ничего не получалось, кроме ввода простого
<br>
Поэтому, не задумываясь, я изменил размер по вертикали, настроив размер шрифта (в pt).
источник
Вы должны сделать это встроенным и для каждого
элемента, но он должен работать в большинстве браузеров Fiddle с высотой строки, чтобы получить желаемый эффект. Если вы сделаете его встроенным для каждого элемента, он должен работать в большинстве браузеров и электронной почты (но это слишком сложно для обсуждения здесь).
источник
Это помогло мне, когда я не смог заставить интервал стилей работать из тега span:
источник
использование
<div>
Это позволяет новую линию без вертикального пробела.
Это становится
источник
Ответы на более общем уровне для всех, кто приземлился здесь, поскольку они исправляют проблемы с пробелами, вызванные
<br>
тегом. Я должен сделать много перезагрузок, чтобы получить почти идеальный пиксель.Для решения конкретной проблемы я должен был иметь определенное расстояние между строками. Я добавил поле сверху и снизу.
источник
Я заставил его работать в IE7, используя комбинацию решений, но в основном упаковывая Br в DIV, как предлагали Найджел и другие. Добавил Id и запустил at = "server", чтобы я мог удалить BR при удалении флажка из ряда флажков.
источник
Возможно, использование двух тегов br - самое простое решение, которое работает со всеми браузерами. Но это повторяется.
источник
Как насчет простого добавления абзаца вместо разрыва строки, например,
бла ла ля бла бла абла ля ля бла бла абла ля ля бла бла
бла ла ля бла бла абла ля ля бла бла абла ля ля бла бла бла ла ля бла бла абла ля ля бла бла абла ля ля бла блаЗатем вы можете указать высоту строки или отступы или что-то для этого р
источник