Можете ли вы нацелить <br /> css?


160

Можно ли нацелить <br/>тег разрыва строки с помощью CSS?

Я хотел бы иметь пунктирную линию 1px каждый раз, когда есть разрыв строки. Я настраиваю сайт со своим собственным CSS и не могу изменить установленный HTML, иначе я бы использовал другой способ.

Я не думаю, что это возможно, но, возможно, есть способ, о котором кто-то знает.


Ответы:


169

BRгенерирует разрыв строки, и это только разрыв строки. Поскольку у этого элемента нет содержимого, есть только несколько стилей, которые имеют смысл применять к нему, например clearили position. Вы можете установить BRграницу, но вы ее не увидите, так как она не имеет визуального измерения.

Если вам нравится визуально разделять два предложения, то вы, вероятно, хотите использовать горизонтальную линейку, предназначенную для этой цели. Поскольку вы не можете изменить разметку, я боюсь, что используя только CSS, вы не сможете добиться этого.

Кажется, это уже обсуждалось на других форумах. Извлечение из Re: Установка высоты элемента BR с помощью CSS :

[T] его приводит к несколько странному состоянию для BR в том смысле, что, с одной стороны, он рассматривается не как обычный элемент, а как экземпляр \ A в сгенерированном контенте, а с другой - как обычный элемент в этом (ограниченном подмножестве) CSS-свойствах разрешен для него.

Я также нашел разъяснение в спецификации CSS 1 (никакой спецификации более высокого уровня не упоминает):

Текущие свойства и значения CSS1 не могут описать поведение элемента 'BR'. В HTML элемент «BR» определяет разрыв строки между словами. Фактически элемент заменяется переводом строки. Будущие версии CSS могут обрабатывать добавленное и замененное содержимое, но средства форматирования на основе CSS1 должны обрабатывать «BR» специально.

Тесты Гранта Вагнера показывают, что нет никакого способа стилизовать, BRкак вы можете сделать с другими элементами. В Интернете также есть сайт, где вы можете проверить результаты в своем браузере .

Обновить

Компания pelms провела дальнейшие исследования и указала, что IE8 (на Win7) и Chrome 2 / Safari 4b позволяют вам BRнемного стилизовать. И действительно, я проверил демонстрационную страницу IE с двигателем IE8 IE Net Renderer в , и это сработало.

Update 2 C69 сделал некоторые дополнительные исследования, и оказывается , что вы можете стилизовать маркер для brдовольно сильно (хотя, не кросс-браузер), но это не будет влиять на линии ломать себя, потому что , кажется, принадлежат к родительскому контейнеру.


Отличный ответ. Если это не кросс-браузер, не стоит пытаться его стилизовать, если только вы не настроили таргетинг только на один браузер (например, только на мобильное устройство). В противном случае, кажется, имеет смысл изменить ваш HTML, чтобы разрешить стилизацию (теги <p>, кто-нибудь?)
razzed

49

Попробуйте следующее, я собрал его, используя Обновление 2 из другого ответа с высоким голосом, и он отлично сработал для меня:

br
{   content: "A" !important;
    display: block !important;
    margin-bottom: 1.5em !important;
}

Кажется, не работает на Edge и IE, но они не настоящие браузеры.
Шут

31

Есть одна веская причина, по которой вам нужно стилизовать <br>тег.

Когда это часть кода, которую вы не хотите (или не можете) изменить, и вы хотите, чтобы эта информация <br>не отображалась.

.xxx br {display:none}

Может сэкономить много времени, а иногда и ваш день.


20

Для будущих посетителей, которые могли пропустить мои комментарии:

br {
    border-bottom:1px dashed black;
}

не работает.

Он был протестирован в IE 6, 7 и 8, Firefox 2, 3 и 3.5B4, Safari 3 и 4 для Windows, Opera 9.6 и 10 (альфа) и Google Chrome (версия 2), и не работал ни в одном из их. Если в какой-то момент в будущем кто-то найдет браузер, который поддерживает границу <br>элемента, обновите этот список.

Также обратите внимание, что я пробовал ряд других вещей:

br {
    border-bottom:1px dashed black;
    display:block;
}

br:before { /* and :after */
    border-bottom:1px dashed black;
    /* content and display added as per porneL's comment */
    content: "";
    display: block;
}

br { /* and :before and :after */
    content: url(a_dashed_line_image);
}

Из них следующее работает в Opera 9.6 и 10 (альфа) (спасибо porneL!):

br:after {
    border-bottom:1px dashed black;
    content: "";
    display: block;
}

Не очень полезно, когда он поддерживается только в одном браузере, но мне всегда интересно видеть, как различные браузеры реализуют спецификацию.


3
: раньше не существует без контента. Добавьте content:""; display:blockко второму правилу.
Корнел

10

Я знаю, что вы не можете редактировать HTML, но если вы можете изменить CSS, можете ли вы добавить JavaScript?

если это так, вы можете включить JQuery, то вы могли бы сделать

<script language="javascript">
$(document).ready(function() {
    $('br').append('<span class="myclass"></span>');
});
</script>

1
Вы хотите сказать $ ('br'). Before ('<span class = "myclass"> </ span>');
molokoloco

10
br { padding: 1px 8px; border-bottom: 1px dashed #000 }

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

IE 8 скриншот

(Примечание: я использую IE 8.0.7100 (на Win7 RC), если это имеет значение)

Также,

br:after { content: "..." }  
br { content: "" }`

или,

br:after {
    border: 1px none black;
    border-bottom-style: dashed;
    content: "";
    padding: 0 6px 0;
}

br { content: "" }

дает пунктирную линию в Chrome 2 / Safari 4b, но теряет разрыв строки, который (если кто-либо не может придумать способ вновь ввести это) делает его менее чем бесполезным.

например ,
тест IE8 , Chrome / Safari тест и другие


Это интересно. Я не могу воспроизвести это под IE8. Можете ли вы привести пример онлайн, который выглядит как ваш IE8 как ваше встроенное изображение?
viam0Zah

Ссылки добавлены - Win7 использует немного другую версию IE8 на случай, если что-то изменится.
Пелмс

1
@pelms Спасибо, я проверил тестовую страницу IE с IENetRenderer, и она действительно показывает границу ниже BR. Спасибо, я обновил свой ответ с вашими результатами тестирования.
viam0Zah

2

Мои собственные тесты убедительно показывают, что brтеги не любят быть целью для CSS.

Но если вы можете добавить стиль, то, возможно, вы также можете добавить тег script в заголовок страницы? Ссылка на внешний, .jsкоторый делает что-то вроде этого:

function replaceLineBreaksWithHorizontalRulesInElement( element )
{
    elems = element.getElementsByTagName( 'br' );
    for ( var i = 0; i < elems.length; i ++ )
    {
        br = elems.item( i );
        hr = document.createElement( 'hr' );
        br.parentNode.replaceChild( hr, br );
    }
}

Короче говоря, это не оптимально, но вот мое решение.


«К сожалению, я не могу изменить HTML», - пишет dc3.
viam0Zah

2
@ Török: ответ, который я разместил, предназначен не только для ОП, но и для всех, кто когда-либо находил эту страницу с похожим вопросом.
Крис

2

кажется, это решает проблему:

<!DOCTYPE html>

<style type="text/css">
#someContainer br { display:none }
#someContainer br + a:before { content:"|"; color: transparent; letter-spacing:-100px; border-left: 1px dashed black; margin:0 5px; }
</style>

<div id="someContainer"><a>link</a><br /><a>link</a><br /><a>link</a></div>

1

BR это встроенный элемент, а не блочный элемент.

Итак, вам нужно:

 br.Underline{
    border-bottom:1px dashed black;
    display: block;
  }

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


Встроенные элементы действительно имеют границы, и поле Прокладки - только ведут себя по- другому.
viam0Zah

Я пробую вещи в Fx с Firebug. Я тоже это попробовал, но у меня это не сработало. Я заметил, что косая черта в теге разрыва строки не является плавающей (если это правильная терминология), т. Е. Между br и / нет пробела. это фактор. Я думал, что должно быть место. Я все равно отредактировал html в firebug, чтобы исправить это и до сих пор ничего. В любом случае, спасибо всем за помощь - никогда раньше не пользовался этим сайтом, и я очень удивлен, насколько быстро я получил ответ. отличное сообщество у вас здесь.
dc3

2
@ Richard: Вы действительно проверяли это, если так, то какой браузер (ы)? Я попробовал это сделать в IE 6, 7 и 8, Firefox 2, 3 и 3.5B4, Safari 3 и 4 для Windows, Opera 9.6 и 10 (бета) и Google Chrome (версия 1), и он не работал ни в одном из них ,
Грант Вагнер

1

ОБНОВЛЕНО 13.09.2009:

Цель стилизации <br>тега, подобного этой, состоит в том, чтобы сделать «больший» разрыв строки (т.е. с небольшим дополнительным пространством между строками).

Класс oldbig (ниже) был протестирован и работал должным образом в стилях Chrome 66.0.3359.181, Firefox Quantum 60.0.2, Edge 42.17134.1.0 и IE 11.48.17134.0. К сожалению, он сломался в Chrome версии 76 и его производных (около августа 2019 года). Симптом заключается в том, что лишний пробел между строками больше не отображается.

Класс "newbig" протестирован и работает должным образом в текущих версиях Chrome (76.0.3809.132), Opera, Firefox, Edge, IE, Brave и Palemoon:

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

Вот демо:

br.oldbig {line-height:175%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}
<p style="max-width:20em">This is a paragraph which demonstrates the difference 
 between a line-break which occurs when the text exceeds the max-width, and a 
 line-break forced by a &lt;br&gt; tag here:<br>
 and a line break forced by a &lt;br class=oldbig&gt; tag here:<br class=oldbig>
 and a line break forced by a &lt;br class=newbig&gt; tag here:<br class=newbig>
 This is the next line after the &lt;br class=newbig&gt; tag (but still 
 part of the same paragraph).</p>
<p style="max-width:20em">And this is another paragraph, entirely.</p>

Вот результат, отображаемый в Chrome v.76:

Скриншот


0

Это будет работать, но только в IE. Я проверял это в IE8.

br {

  border-bottom: 1px dashed #000000;
  background-color: #ffffff;
  display: block;
  }

0

Я поместил <br>тег в <span>тег и смог использовать display:none;его, <span>чтобы контролировать, когда не использовать <br>тег с помощью Media Queries.


Почему бы просто не нацелиться <br>непосредственно на объект, а не оборачивать его в промежуток?
Гэвин

0

старый вопрос, но это довольно аккуратное и чистое решение, может пригодиться людям, которые все еще задаются вопросом, возможно ли это :):

br{
    content: '.';
    display: inline-block;
    width: 100%;
    border-bottom: 1px dashed black;
}

с помощью этого исправления вы также можете удалять BR на веб-сайтах (просто установите ширину 0px)


-2

Почему бы просто не использовать тег HR? Это сделано именно для того, что вы хотите. Вроде как пытаться приготовить вилку для супа, когда перед вами на столе ложка.


работает не для всех случаев использования, потому что hr является блочным элементом - поэтому стилизация ограничена
Thariama

1
Видимо, он хочет использовать ясность: все, см. Отличный ответ Габора. Так что ваша метафора не имеет никакого смысла.
eddy147
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.