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

160

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.

dc3
quelle
1
Siehe stackoverflow.com/a/1409742
Peter Krauss

Antworten:

169

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.

viam0Zah
quelle
Gute Antwort. Wenn es sich nicht um einen browserübergreifenden Browser handelt, lohnt es sich nicht, ihn zu formatieren, es sei denn, Sie zielen nur auf den einen Browser ab (z. B. nur auf Mobilgeräten). Ansonsten scheint es sinnvoll zu sein, Ihren HTML-
Code so
49

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;
}
Rok
quelle
Scheint nicht mit Edge und IE zu funktionieren, aber sie sind keine echten Browser.
Jester
31

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.

Bernard Sfez
quelle
20

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.

Grant Wagner
quelle
3
: vorher existiert nicht ohne Inhalt. In content:""; display:blockauf die zweite Regel.
Kornel
10

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>
Roy Rico
quelle
1
Sie möchten $ ('br'). Before ('<span class = "myclass"> </ span>') sagen;
Molokoloco
10
br { padding: 1px 8px; border-bottom: 1px dashed #000 }

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

IE 8 Screenshot

(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

Pelme
quelle
Das ist interessant. Ich kann das unter IE8 nicht reproduzieren. Können Sie ein Beispiel online stellen, das in Ihrem IE8 als eingebettetes Bild aussieht?
viam0Zah
Links hinzugefügt - Win7 verwendet eine etwas andere Version von IE8, falls dies einen Unterschied macht.
Pelms
1
@pelms Danke, ich habe die IE-Testseite mit IENetRenderer überprüft und sie zeigt wirklich den Rand darunter BR. Vielen Dank, ich habe meine Antwort mit Ihren Testergebnissen aktualisiert.
viam0Zah
2

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.

Kris
quelle
"Ich kann das HTML leider nicht ändern", schrieb dc3.
viam0Zah
2
@ Török: Die Antwort, die ich gepostet habe, ist nicht nur für das OP, sondern für alle, die diese Seite jemals mit einer ähnlichen Frage finden.
Kris
2

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>
y34h
quelle
1

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.

richardtallent
quelle
Inline - Elemente Sie haben Grenzen, Polsterungen und Margen - nur andere Art und Weise verhalten.
viam0Zah
Ich probiere Dinge in Fx mit Firebug aus. Ich hatte das auch versucht, aber es funktionierte nicht für mich. Ich stelle fest, dass der Schrägstrich im Zeilenumbruch-Tag nicht schwebt (wenn dies die richtige Terminologie ist), dh zwischen dem br und dem / steht kein Leerzeichen. Ist das ein Faktor? Ich hatte gedacht, dass es einen Raum geben musste. Ich habe das HTML trotzdem in Firebug bearbeitet, um dies zu beheben und immer noch nichts. Trotzdem danke für all die Leute, die diese Seite noch nie benutzt haben und ich bin sehr überrascht, wie schnell ich eine Antwort bekommen habe. tolle Community, die du hier hast.
dc3
2
@richard: Hast du das tatsächlich getestet, wenn ja, welche Browser? Ich habe es in IE 6, 7 & 8, Firefox 2, 3 & 3.5B4, Safari 3 & 4 für Windows, Opera 9.6 & 10 (Beta) und Google Chrome (Version 1) versucht und es hat in keinem von ihnen funktioniert .
Grant Wagner
1

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:

Bildschirmfoto

Dave Burton
quelle
0

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

br {

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

quelle
0

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.

Sean Collins
quelle
Warum nicht einfach direkt auf das Ziel zielen, <br>anstatt es in eine Spanne zu wickeln?
Gavin
0

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).

Morrisramone
quelle
-2

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.

Natas
quelle
funktioniert nicht für alle Anwendungsfälle, da hr ein Blockelement ist - daher ist das Styling begrenzt
Thariama
1
Anscheinend will er klar verwenden: Alles, siehe Gabors ausgezeichnete Antwort. Ihre Gabelmetapher macht also überhaupt keinen Sinn.
eddy147