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

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

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

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

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довольно сильно (хотя, не кросс-браузер), но это не будет влиять на линии ломать себя, потому что , кажется, принадлежат к родительскому контейнеру.

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

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

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

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

.xxx br {display:none}

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

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

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;
}

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

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

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

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

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

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

(Примечание: я использую 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 тест и другие

Мои собственные тесты убедительно показывают, что 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 );
    }
}

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

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

<!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>

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

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

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

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

ОБНОВЛЕНО 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:

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

br {

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

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

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

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

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

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