Können Sie <br /> mit CSS zielen?

Ist es möglich, das Zeilenumbruch- <br/>Tag mit CSS anzuvisieren ?

Ich möchte jedes Mal, wenn es einen Zeilenumbruch gibt, eine gestrichelte Linie von 1 Pixel haben. Ich passe eine Site mit meinem eigenen CSS an und kann den eingestellten HTML-Code nicht ändern, da ich sonst eine andere Methode verwenden würde.

Ich denke nicht, dass es möglich ist, aber vielleicht gibt es einen Weg, den jemand kennt.

BRerzeugt einen Zeilenumbruch und es ist nur ein Zeilenumbruch. Da dieses Element keinen Inhalt hat, gibt es nur wenige Stile, die sinnvoll sind, um es anzuwenden, wie clearoder position. Sie können den BRRand festlegen , aber Sie werden ihn nicht sehen, da er keine visuelle Dimension hat.

Wenn Sie zwei Sätze visuell trennen möchten, möchten Sie wahrscheinlich das horizontale Lineal verwenden, das für dieses Ziel vorgesehen ist. Da Sie das Markup nicht ändern können, können Sie dies leider nicht mit CSS erreichen.

Es scheint, dass es bereits in anderen Foren diskutiert wurde. Auszug aus Re: Festlegen der Höhe eines BR-Elements mit CSS :

Dies führt zu einem etwas merkwürdigen Status für BR, da es einerseits nicht als normales Element behandelt wird, sondern als Instanz von \ A in generierten Inhalten, andererseits als Ein normales Element darin (eine begrenzte Teilmenge von) CSS-Eigenschaften ist darauf zulässig.

Ich habe auch eine Klarstellung in der CSS 1-Spezifikation gefunden (keine übergeordnete Spezifikation erwähnt dies):

Die aktuellen CSS1-Eigenschaften und -Werte können das Verhalten des 'BR'-Elements nicht beschreiben. In HTML gibt das Element 'BR' einen Zeilenumbruch zwischen Wörtern an. Tatsächlich wird das Element durch einen Zeilenumbruch ersetzt. Zukünftige Versionen von CSS können hinzugefügte und ersetzte Inhalte verarbeiten, CSS1-basierte Formatierer müssen jedoch 'BR' speziell behandeln.

Die Tests von Grant Wagner zeigen, dass es keine Möglichkeit gibt, BRwie bei anderen Elementen zu stylen. Es gibt auch eine Online-Site, auf der Sie die Ergebnisse in Ihrem Browser testen können .

Aktualisieren

pelms machte einige weitere Untersuchungen und wies darauf hin, dass IE8 (unter Win7) und Chrome 2 / Safari 4b es Ihnen ermöglichen, BRetwas zu stylen . Und in der Tat, überprüfte ich die IE Demo - Seite mit IE Net Renderer des IE8 Motor , und es funktionierte.

Update 2 c69 machte einige weitere Untersuchungen, und es stellt sich heraus , Sie können Stil den Marker für brziemlich stark (aber nicht Cross-Browser), doch dies wirkt sich nicht auf die sich Linie brechen, weil sie scheinen zu übergeordneten Container zu gehören.

Versuchen Sie Folgendes: Ich habe es mit Update 2 aus einer anderen Antwort mit hohen Stimmen zusammengestellt und es hat perfekt für mich funktioniert:

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

Es gibt einen guten Grund, warum Sie ein <br>Tag stylen müssten .

Wenn es Teil des Codes ist, möchten Sie es nicht ändern (oder können es nicht) und möchten, dass dieses bestimmte <br>nicht angezeigt wird.

.xxx br {display:none}

Kann viel Zeit und manchmal Ihren Tag sparen.

Für zukünftige Besucher, die meine Kommentare möglicherweise verpasst haben:

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

funktioniert nicht.

Es wurde in IE 6, 7 und 8, Firefox 2, 3 und 3.5B4, Safari 3 und 4 für Windows, Opera 9.6 und 10 (Alpha) und Google Chrome (Version 2) getestet und funktionierte in keinem von beiden Sie. Wenn irgendwann in der Zukunft jemand einen Browser findet, der einen Rand für ein <br>Element unterstützt, können Sie diese Liste jederzeit aktualisieren.

Beachten Sie auch, dass ich eine Reihe anderer Dinge ausprobiert habe:

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

Von diesen funktioniert Folgendes in Opera 9.6 und 10 (Alpha) (danke porneL!):

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

Nicht sehr nützlich, wenn es nur in einem Browser unterstützt wird, aber ich finde es immer interessant zu sehen, wie verschiedene Browser die Spezifikation implementieren.

Ich weiß, dass Sie den HTML-Code nicht bearbeiten können, aber wenn Sie das CSS ändern können, können Sie Javascript hinzufügen?

Wenn ja, können Sie jquery einschließen, dann können Sie dies tun

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

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

rendert wie unten in IE8 ... nicht viel Verwendung in nur einem Browser.

(Hinweis: Ich verwende IE 8.0.7100 (unter Win7 RC), wenn dies einen Unterschied macht.)

Ebenfalls,

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

oder,

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

br { content: "" }

gibt in Chrome 2 / Safari 4b eine gestrichelte Linie an, verliert jedoch den Zeilenumbruch, was ihn weniger als nutzlos macht (es sei denn, jemand kann einen Weg finden, dies wieder einzuführen).

zB
IE8-Test , Chrome / Safari-Test und ein anderer

Meine eigenen Tests zeigen schlüssig, dass brTags nicht gerne für CSS ausgewählt werden.

Aber wenn Sie Stil hinzufügen können, können Sie wahrscheinlich auch ein Scrip-Tag zum Header der Seite hinzufügen? Link zu einem externen .js, der so etwas macht:

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

Kurz gesagt, es ist nicht optimal, aber hier ist meine Lösung.

Dies scheint das Problem zu lösen:

<!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 ist ein Inline-Element, kein Blockelement.

Also brauchst du:

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

Andernfalls lehnen Browser, die in Bezug auf solche Dinge etwas wählerischer sind, die Anwendung von Rahmen auf Ihre BR-Elemente ab, da Inline-Elemente keine Rahmen, Auffüllungen oder Ränder aufweisen.

AKTUALISIERT am 13.09.2019:

Der Zweck, das <br>Tag so zu gestalten, besteht darin, einen "größeren" Zeilenumbruch zu erzeugen (dh mit etwas mehr Platz zwischen den Zeilen).

Die "oldbig" -Klasse (unten) wurde getestet und funktionierte ordnungsgemäß in Chrome 66.0.3359.181, Firefox Quantum 60.0.2, Edge 42.17134.1.0 und IE 11.48.17134.0. Leider brach es in Chrome Version 76 und seinen Derivaten (ca. August 2019). Das Symptom ist, dass der zusätzliche Abstand zwischen den Zeilen nicht mehr angezeigt wird.

Die "newbig" -Klasse wurde getestet und funktioniert ordnungsgemäß in aktuellen Versionen von Chrome (76.0.3809.132), Opera, Firefox, Edge, IE, Brave und Palemoon:

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

Hier ist eine 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>

Dies ist das Ergebnis, das in Chrome v.76 angezeigt wird:

Dies wird funktionieren, aber nur im IE. Ich habe es in IE8 getestet.

br {

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

Ich legte einen <br>Tag in einen <span>Tag und war verwenden , kann display:none;auf der <span>zu steuern , wenn nicht das verwenden <br>Tag Media Queries verwenden.

alte Frage, aber dies ist eine ziemlich ordentliche und saubere Lösung, die möglicherweise für Leute verwendet wird, die sich immer noch fragen, ob es möglich ist :):

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

Mit diesem Fix können Sie auch BRs auf Websites entfernen (stellen Sie einfach die Breite auf 0px ein).

Warum nicht einfach das HR-Tag verwenden? Es ist genau für das gemacht, was Sie wollen. Ein bisschen wie der Versuch, eine Gabel zum Suppenessen zu machen, wenn ein Löffel direkt vor Ihnen auf dem Tisch liegt.