Чи можете ви націлити <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), і він не працював ні в одному з їх. Якщо в якийсь момент в майбутньому хтось знайде веб-переглядач, який підтримує кордон на a<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.

Але якщо ви можете додати стиль, то, ймовірно, ви також можете додати тег сценарію до заголовка сторінки? Посилання на зовнішнє, .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.2019:

Мета такого <br>тегу, як це зробити, - зробити «більший» розрив рядка (тобто, з додатковим простором між рядками).

Клас "oldbig" (нижче) був протестований і працював належним чином у стилі Chrome 66.0.3359.181, Firefox Quantum 60.0.2, Edge 42.17134.1.0 та IE 11.48.17134.0. На жаль, він зламався у версії 76 та його похідних Chrome (близько серпня 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>тег з допомогою медіа запитів.

старе питання, але це досить акуратне та чисте виправлення, воно може бути використане для людей, які все ще цікавляться, чи можливо: :)

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

за допомогою цього виправлення ви також можете видалити BRs на веб-сайтах (просто встановіть ширину на 0px)

Чому б просто не використовувати тег HR? Він зроблений саме для того, що ви хочете. Начебто намагаються зробити виделку для їжі супу, коли перед вами на столі столову ложку.