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

Question

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

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

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

Answer 1

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 , и он заработал.

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

Answer 2

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

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

Answer 3

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

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

.xxx br {display:none}

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

Answer 4

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

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 (alpha) (спасибо porneL!):

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

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

Answer 5

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

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

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

Answer 6

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 тест и другой

Answer 7

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

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

Answer 8

похоже, это решает проблему:

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

Answer 9

Это проверено и работает должным образом в Chrome 66.0.3359.181, Firefox Quantum 60.0.2, Edge 42.17134.1.0 и IE 11.48.17134.0, чтобы стилизовать BR, чтобы сделать «больший» разрыв строки (т.е. дополнительный пробел между строками):

br.big {line-height:175%;vertical-align:top;}

Вот демоверсия:

br.big {line-height:175%;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 BR tag here:<br>
 and a line break forced by a "bigger" BR tag here:<br class=big>
 This is the next line after the bigger BR tag (but still 
 part of the same paragraph).</p>
<p style="max-width:20em">And this is another paragraph, entirely.</p>

Это результат:

Answer 10

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

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

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

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