Czy możesz kierować <br /> za pomocą CSS?

Czy można kierować na <br/>znacznik końca wiersza za pomocą CSS?

Chciałbym mieć linię przerywaną o wielkości 1 piksela za każdym razem, gdy występuje koniec linii. Dostosowuję witrynę za pomocą własnego CSS i nie mogę zmienić zestawu HTML, w przeciwnym razie użyłbym innego sposobu.

Myślę, że to nie jest możliwe, ale może jest sposób, o którym ktoś wie.

BRgeneruje znak końca wiersza i jest to tylko koniec wiersza. Ponieważ ten element nie ma treści, istnieje tylko kilka stylów, które warto na nim zastosować, na przykład clearlub position. Możesz ustawić BRgranicę, ale jej nie zobaczysz, ponieważ nie ma ona wymiaru wizualnego.

Jeśli chcesz wizualnie oddzielić dwa zdania, prawdopodobnie zechcesz użyć poziomej linijki, która jest przeznaczona do tego celu. Ponieważ nie możesz zmienić znaczników, obawiam się, że używając tylko CSS, nie możesz tego osiągnąć.

Wygląda na to, że był już omawiany na innych forach. Wyciąg z Re: Ustawianie wysokości elementu BR za pomocą CSS :

[T] jego prowadzi do nieco dziwnego statusu dla BR, ponieważ z jednej strony nie jest traktowany jako zwykły element, ale jako instancja \ A w generowanej treści, ale z drugiej strony jest traktowany jako normalny element, w którym dozwolone są (ograniczony podzbiór) właściwości CSS.

Znalazłem również wyjaśnienie w specyfikacji CSS 1 (żadna specyfikacja wyższego poziomu nie wspomina o tym):

Bieżące właściwości i wartości CSS1 nie mogą opisywać zachowania elementu „BR”. W HTML element „BR” określa podział wiersza między słowami. W efekcie element zostaje zastąpiony podziałem wiersza. Przyszłe wersje CSS mogą obsługiwać dodaną i zastępowaną zawartość, ale elementy formatujące oparte na CSS1 muszą specjalnie traktować „BR”.

Testy Granta Wagnera pokazują, że nie ma sposobu na stylizację, BRjak w przypadku innych elementów. Istnieje również strona internetowa, na której możesz przetestować wyniki w swojej przeglądarce .

Aktualizacja

pelms przeprowadził dalsze badania i wskazał, że IE8 (na Win7) i Chrome 2 / Safari 4b pozwalają BRnieco nadać styl . I rzeczywiście, sprawdziłem stronę demonstracyjną IE z silnika renderującego IE8 pomniejszane jest , i to działało.

Aktualizacja 2 c69 przeprowadziła dalsze badania i okazuje się, że możesz stylizować znacznik na brdość mocno (choć nie w różnych przeglądarkach), ale nie wpłynie to na sam podział linii, ponieważ wydaje się, że należy on do kontenera nadrzędnego.

Spróbuj wykonać następujące czynności, złożyłem to razem za pomocą Aktualizacji 2 z innej odpowiedzi z dużą liczbą głosów i zadziałało idealnie dla mnie:

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

Jest jeden dobry powód, dla którego warto nadać styl <br>tagowi.

Kiedy jest to część kodu, którego nie chcesz (lub nie możesz) zmienić i chcesz, aby ten konkretny <br>nie był wyświetlany.

.xxx br {display:none}

Może zaoszczędzić dużo czasu, a czasem nawet dzień.

Z korzyścią dla przyszłych gości, którzy mogli przegapić moje komentarze:

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

nie działa.

Został przetestowany w IE 6, 7 i 8, Firefox 2, 3 i 3.5B4, Safari 3 i 4 dla Windows, Opera 9.6 i 10 (alfa) oraz Google Chrome (wersja 2) i nie działał w żadnym z im. Jeśli w przyszłości ktoś znajdzie przeglądarkę obsługującą obramowanie <br>elementu, prosimy o zaktualizowanie tej listy.

Zwróć też uwagę, że próbowałem wielu innych rzeczy:

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

Spośród nich, poniższe działa w Operze 9.6 i 10 (alfa) (dzięki porneL!):

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

Niezbyt przydatne, gdy jest obsługiwane tylko w jednej przeglądarce, ale zawsze interesuje mnie, jak różne przeglądarki implementują specyfikację.

Wiem, że nie możesz edytować kodu HTML, ale jeśli możesz zmodyfikować CSS, czy możesz dodać javascript?

jeśli tak, możesz dołączyć jquery, możesz to zrobić

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

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

renderuje się jak poniżej w IE8 ... jednak nie jest zbyt często używany w jednej przeglądarce.

(Uwaga: używam IE 8.0.7100 (na Win7 RC), jeśli to robi jakąkolwiek różnicę)

Również,

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

lub,

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

br { content: "" }

daje przerywaną linię w Chrome 2 / Safari 4b, ale traci podział linii, co (chyba że ktoś może wymyślić sposób na ponowne wprowadzenie tego) sprawia, że ​​jest mniej niż bezużyteczny.

np
Test IE8 , Chrome / test Safari i innym

Moje własne testy jednoznacznie pokazują, że brtagi nie lubią być kierowane do CSS.

Ale jeśli możesz dodać styl, prawdopodobnie możesz również dodać tag script do nagłówka strony? Link do zewnętrznego, .jsktóry robi coś takiego:

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

Krótko mówiąc, nie jest to optymalne, ale oto moje rozwiązanie.

wydaje się, że rozwiązuje to problem:

<!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 jest elementem wbudowanym, a nie blokowym.

Potrzebujesz więc:

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

W przeciwnym razie przeglądarki, które są trochę bardziej wybredne w takich kwestiach, odmówią stosowania obramowań do elementów BR, ponieważ elementy wbudowane nie mają obramowań, dopełnienia ani marginesów.

ZAKTUALIZOWANO 13.09.2019:

Celem takiego stylu <br>znacznika jest utworzenie „większego” końca wiersza (tj. Z odrobiną dodatkowego odstępu między wierszami).

Klasa „oldbig” (poniżej) została przetestowana i działała poprawnie w Chrome 66.0.3359.181, Firefox Quantum 60.0.2, Edge 42.17134.1.0 i IE 11.48.17134.0. Niestety zepsuło się w Chrome w wersji 76 i jego pochodnych (około sierpnia 2019). Objawem jest to, że dodatkowa przestrzeń między wierszami nie jest już wyświetlana.

Klasa „newbig” została przetestowana i działa poprawnie w aktualnych wersjach przeglądarek Chrome (76.0.3809.132), Opera, Firefox, Edge, IE, Brave i Palemoon:

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

Oto demo:

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>

Oto wynik wyświetlony w Chrome v.76:

To zadziała, ale tylko w IE. Przetestowałem to w IE8.

br {

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

Umieściłem <br>tag w <span>tagu i mogłem użyć display:none;go <span>do kontrolowania, kiedy nie używać <br>tagu za pomocą zapytań o media.

stare pytanie, ale jest to całkiem zgrabna i czysta poprawka, może przydać się osobom, które wciąż zastanawiają się, czy to możliwe :):

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

dzięki tej poprawce możesz również usuwać BR ze stron internetowych (wystarczy ustawić szerokość na 0px)

Dlaczego po prostu nie użyć tagu HR? Jest zrobiony dokładnie tak, jak chcesz. Coś jak próba zrobienia widelca do jedzenia zupy, kiedy na stole leży łyżka tuż przed tobą.