Ich habe einen großen Textabschnitt, der in Unterabsätze mit <br>'s unterteilt ist:

<p>
  Blah blah blah.
  <br/>
  Blah blah blah. Blah blah blah. Blah blah blah.
  <br/>
  Blah blah blah.
</p>

Ich möchte die Lücke zwischen diesen Unterabschnitten vergrößern, als gäbe es zwei <br>oder so etwas. Ich weiß, dass der richtige Weg dazu die Verwendung ist <p></p>, aber im Moment kann ich dieses Layout nicht ändern, daher suche ich nach einer Nur-CSS-Lösung.

Ich habe versucht Einstellung <br>‚s line-heightund heightmit display: block, auch ich gegoogelt und Stack - Überlauf-ed kurz, aber fand keine Lösung finden. Ist das überhaupt möglich, ohne das Layout zu ändern?

CSS:

br {
   display: block;
   margin: 10px 0;
}

Die Lösung ist wahrscheinlich nicht browserübergreifend kompatibel, aber zumindest etwas. Beachten Sie auch die Einstellung line-height:

line-height:22px;

Beachten Sie für Google Chrome die folgenden Einstellungen content:

content: " ";

Abgesehen davon denke ich, dass Sie mit einer JavaScript-Lösung nicht weiterkommen.

Hier ist die richtige Lösung, die tatsächlich browserübergreifende Unterstützung bietet:

  br {
        line-height: 150%;
     }

Die obigen Blicke haben also im Grunde eine ähnliche Antwort, aber hier ist es sehr prägnant. Funktioniert in Opera, Chrome, Safari und Firefox, höchstwahrscheinlich auch im Internet Explorer?

br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 0; /* change this to whatever height you want it */
}

Eine andere Möglichkeit ist die Verwendung einer Personalabteilung . Aber, und hier ist der listige Teil, machen Sie es unsichtbar.

So:

<hr style="height:30pt; visibility:hidden;" />

Um eine sauberere BR-Pause mit der HR zu simulieren: Btw funktioniert in allen Browsern !!

{ height:2px; visibility:hidden; margin-bottom:-1px; }

Soweit ich weiß <br>nicht , haben eine Höhe, zwingt sie lediglich einen Zeilenumbruch. Was Sie haben, ist ein Text mit einigen Zeilenumbrüchen zusätzlich zu den Zeilenumbrüchen, keine Unterabsätze. Sie können den Zeilenabstand ändern, dies wirkt sich jedoch auf alle Zeilen aus.

Ich hatte gerade dieses Problem und habe es mithilfe von umgangen

<div style="line-height:150%;">
    <br>
</div>

Sie können die Zeilenhöhe auf dieses <p>Element anwenden , damit die Linien größer werden.

Ich habe das nicht ausprobiert :before:after Pseudoelement / CSS2 , hauptsächlich, weil es nur in IE8 unterstützt wird (dies betrifft IE-Browser) . Dies könnte die einzig mögliche CSS-Lösung sein:

br:before {
    display: block;
    margin-top: 10px;
    content: "";
}

Hier ist ein Beispiel für QuirksMode .

Ich hatte einen Gedanken, den Sie vielleicht verwenden könnten:

br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

Aber das funktionierte nicht auf Chrom oder Firefox.

Ich dachte nur, ich würde das erwähnen, falls es jemand anderem einfällt, und ich würde ihnen den Ärger ersparen.

br {   
    content: "";
    margin: 2em;
    display: block;
    margin-bottom: -20px; 
 }

Funktioniert in Firefox, Chrome und Safari. Wurde nicht im Explorer getestet. (Windows-Tablet ist stromlos.)

Zeilenumbrüche und Schriftgrößen funktionieren in Firefox & Safari anders.

Interessanterweise, wenn das break-Tag wie folgt in voller Form geschrieben ist:

<br></br>

dann funktioniert die CSS-Zeilenhöhe: 145%. Wenn das break-Tag wie folgt geschrieben ist:

<br> or 
<br/> 

dann funktioniert es nicht, zumindest in Chrome, IE und Firefox. Seltsam!

Was für mich funktioniert, ist das Hinzufügen dieser Inline zwischen Absatz-Tags ... allerdings nicht die beste Lösung.

<br style="line-height:32px">

-------- Bearbeiten ---------

Ich bin damit auf Probleme mit PC / Mac gestoßen ... Es gibt dem Text die neue Zeilenhöhe, macht aber keinen Zeilenumbruch ... Möglicherweise möchten Sie einige Tests selbst durchführen. Es tut uns leid!

Und denken Sie daran, dass die (falsche) Verwendung des <hr>Tags, wie irgendwo vorgeschlagen, das <p>Tag beendet. Vergessen Sie also diese Lösung.
Wenn f.ex. Etwas ist auf die Umgebung gestylt <p>, dieser Stil ist für den Rest des Inhalts verschwunden, nachdem das <hr>eingefügt wurde.

Hier ist eine Lösung, die in IE, Firefox und Chrome funktioniert. Die Idee ist, die Schriftgröße des br-Elements von der Körpergröße von 14 Pixel auf 18 Pixel zu erhöhen und das Element um 4 Pixel zu verringern, sodass die zusätzliche Größe unter der Textzeile liegt. Das Ergebnis ist 4px zusätzliches Leerzeichen unter dem br.

br 
{ 
font-size: 18px; 
vertical-align: -4px; 
}  

AKTUALISIERT am 13. September 2019:

Ich <br class=big>mache einen übergroßen Zeilenumbruch, wenn ich einen brauche. Bis heute habe ich es so gestylt:

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

(Das vertical-align:topwurde nur für IE und Edge benötigt.)

Das funktionierte in allen gängigen Browsern, die ich ausprobiert habe: Chrome, Firefox, Opera, Brave, PaleMoon, Edge und IE11.

Vor kurzem funktionierte es jedoch nicht mehr in Chrome-basierten Browsern : Meine "großen" Zeilenumbrüche wurden zu Zeilenumbrüchen normaler Größe.

(Ich weiß nicht genau, wann sie es kaputt gemacht haben. Ab dem 12. September 2019 funktioniert es immer noch in meinem veralteten Chromium Portable 55.0.2883.11, aber es ist in Opera 63.0.3368.71 und Chrome 76.0.3809.132 (beide Windows) kaputt und Android).)

Nach einigem Ausprobieren habe ich den folgenden Ersatz gefunden, der in den aktuellen Versionen all dieser Browser funktioniert:

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

Anmerkungen:

line-height:190% funktioniert in allen außer den neuesten Versionen von Chrome-basierten Browsern.

vertical-align:topwird für IE und Edge (in Kombination mit line-height:190%) benötigt, um den zusätzlichen Speicherplatz nach der vorhergehenden Zeile zu erhalten, in die er gehört, und nicht teilweise vor und teilweise nach.

display:block;content:"";margin-top:0.5em funktioniert in Chrome, Opera & Firefox, aber nicht in Edge & IE.

Eine alternative (einfachere) Möglichkeit, nach einem <br>Tag etwas zusätzlichen vertikalen Speicherplatz hinzuzufügen , wenn Sie nichts dagegen haben, den HTML-Code zu bearbeiten, ist so etwas. Es funktioniert gut in allen Browsern:

<span style="vertical-align:-37%"> </span><br>

(Sie können die "-37%" natürlich nach Bedarf anpassen, um eine größere oder kleinere Lücke zu schließen.) Hier ist eine Demoseite, die einige andere Variationen des Themas enthält:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html



28. Mai 2020:

Ich habe die Demoseite aktualisiert. Es werden nun alle oben genannten Techniken demonstriert:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

Michael und Yoda haben beide recht. Sie können das <p>Tag verwenden, das als Block-Tag einen unteren Rand verwendet, um den folgenden Block zu versetzen. Sie können also etwas Ähnliches tun, um einen größeren Abstand zu erhalten:

<p>
    A block of text.
</p>
<p>
    Another block
</p>

Eine andere Alternative ist die Verwendung des Block- <hr>Tags, mit dem Sie die Höhe des Abstands explizit definieren können.

<br />nimmt so viel Platz ein wie eine mit Text gefüllte Zeile von Ihnen <p>, das können Sie nicht ändern. Wenn Sie größer sein möchten, bedeutet dies, dass Sie in Absätze trennen möchten. Fügen Sie also weitere hinzu <p>. Vergiss nicht, so semantisch wie möglich zu sein;)

Sie können auch die Eigenschaft "Block-Quote" in CSS verwenden. Dies würde dazu führen, dass Ihre einzelnen Zeilen nicht beeinträchtigt werden. Sie können jedoch Parameter nur für die Unterbrechungen zwischen Absätzen oder "Blockzitaten" festlegen.

UPDATE:
Ich stehe korrigiert. "blockquote" ist eigentlich eine HTML-Eigenschaft. Sie verwenden es genau wie <p> und </ p> für Ihre Arbeit. Sie können dann die Parameter für Ihr Blockzitat in CSS wie einstellen

blockquote { margin-top: 20px }

Hoffe das hilft. Es ähnelt dem Einstellen der Parameter auf dem br und ist möglicherweise browserübergreifend kompatibel.

Sie scheinen nicht in der Lage zu sein, die Höhe eines BR anzupassen, aber Sie können ihn mithilfe der Anzeige zuverlässig verschwinden lassen: keine

Kam über diese Seite, als ich nach einer Lösung für Folgendes suchte:

Ich habe eine Situation, in der das Zahlungsgateway eines Drittanbieters (Worldpay) nur die Zahlungsseiten mit maximal 10.000 CSS und HTML (kein Skript zulässig) anpassen kann, die in den Hauptteil der Vorlage eingefügt werden, und nach einigen BRs, FONT-Tags usw. In Verbindung mit der DTD, die den IE7 / 8 in den Quirks-Modus versetzt, ist die browserübergreifende Anpassung so schwierig wie möglich!

Durch das Ausschalten von BRs werden die Dinge viel konsistenter ...

Ich benutze diese Methoden, aber ich weiß nicht, ob Cross-Browser

================= Methode 1 ==================

br {
    display:none;
}

ODER

================= Methode 2 ==================

br {
    display: block;
    margin-bottom: 2px;
    font-size:2px;
    line-height: 2px;
}
br:before {
    display: block;
    margin-top: 2px;
    content: "";
}
br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

ODER

================= Methode 3 ==================

br:after { content: "" }
br { content: "" }

Versuchen Sie, das CSS- line-heightAttribut für Ihr pTag zu verwenden, das das brTag enthält . Denken Sie daran, dass Sie idIhre pTags verwenden können, wenn Sie sie isolieren möchten. Es ist jedoch möglicherweise besser div, IMO zur Isolierung zu verwenden.

Es tut uns leid, wenn jemand anderes dies bereits gesagt hat, aber die einfache Lösung besteht darin, mit Ihrer "Linienhöhe" herumzuspielen. Wenn Sie bei der Verwendung eines Zeilenumbruchs zu viel Platz erhalten, liegt dies einfach daran, dass Sie die Zeilenhöhe zu hoch eingestellt haben. Sie können dies in CSS korrigieren (aber wissen, dass es sich auf alles auswirkt, was diese Eigenschaft verwendet), oder Sie können einen Inline-Stil ausführen, um das CSS zu überschreiben.

Ich musste eine Lösung entwickeln, um HTML in PDF zu konvertieren und den Text vertikal in Tabellenzellen zu zentrieren, aber nichts funktionierte außer der Eingabe der Ebene <br>

Wenn ich über den Tellerrand hinaus denke, habe ich die vertikale Größe durch Anpassen der Schriftgröße (in pt) geändert.

<font style="font-size: 4pt"><br></font>

<span style="line-height:40px;"><br></span> 

Sie
müssten dies inline und für jedes Element tun, aber es sollte bei den meisten Browsern funktionieren. Spielen Sie mit der Zeilenhöhe, um den gewünschten Effekt zu erzielen. Wenn Sie es für jedes Element inline machen, sollte es in den meisten Browsern und E-Mails funktionieren (dies ist jedoch zu komplex, um hier diskutiert zu werden).

Dies war der Trick für mich, als ich den Stilabstand vom span-Tag nicht zum Laufen bringen konnte:

        <p style='margin-bottom: 5px' >
            <span>I Agree</span>
        </p>
        <span>I Don't Agree</span>

Verwenden <div>

<div>Content 1</div>Content 2

Dies ermöglicht eine neue Linie ohne vertikalen Abstand.

Das wird

<div>Content 1</div>Content 2

Eine allgemeinere Antwort für alle, die hier gelandet sind, da sie Probleme mit dem Abstand beheben, die durch das <br>Tag verursacht werden . Ich muss viele Resets durchführen, um nahezu pixelgenau zu sein.

br {
    content: " ";
    display: block;
}

Für das spezifische Problem, das ich ansprach, musste ich einen bestimmten Abstand zwischen den Zeilen haben. Ich habe oben und unten einen Rand hinzugefügt.

br {
    content: " ";
    display: block;
    margin: 0.25em 0;
}

Ich habe es in IE7 zum Laufen gebracht, indem ich eine Kombination von Lösungen verwendet habe, aber hauptsächlich das Br in DIV verpackt habe, wie Nigel und andere vorgeschlagen haben. ID hinzugefügt und bei = "Server" ausgeführt, damit ich den BR entfernen kann, wenn das Kontrollkästchen aus der Reihe der Kontrollkästchen entfernt wird.

.narrow {
    display: block;
    margin: 0px;
    line-height: 0px;
    content: " "; 
}

<div class="narrow" run at="server"><br></br></div>

Möglicherweise ist die Verwendung von zwei br-Tags die einfachste Lösung, die mit allen Browsern funktioniert. Aber es wiederholt sich.

<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>

Wie wäre es, wenn Sie einfach einen Absatz anstelle des Zeilenumbruchs hinzufügen?

bla la la bla bla abla la la bla bla abla la bla bla a

Dann können Sie die Linienhöhe oder die Auffüllung oder was auch immer für dieses p angeben