it-swarm.com.de

Wie ändere ich die Höhe eines <br>?

Ich habe einen großen Textabschnitt, der in Unterabschnitte 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>s oder ähnliches. Ich weiß, dass der richtige Weg, dies zu tun, die Verwendung von <p></p> ist, aber momentan kann ich dieses Layout nicht ändern. Daher suche ich nach einer CSS-Lösung.

Ich habe versucht, <br>s line-height und height mit display: block einzustellen. Ich habe auch kurz gegoogelt und Stack Overflow-ed eingestellt, aber keine Lösung gefunden. Ist das überhaupt möglich, ohne das Layout zu ändern?

220
n1313

Css:

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

Die Lösung ist wahrscheinlich nicht Cross-Browser-kompatibel, aber es ist zumindest etwas. Beachten Sie auch die Einstellung von line-height:

line-height:22px;

Für Google Chrome consider Einstellung content:

content: " ";

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

237
Duroth

Hier ist die richtige Lösung, dietatsächlichbrowserübergreifend unterstützt:

  br {
        line-height: 150%;
     }
51
htmldrum

Die oben genannten Pieps haben im Grunde eine ähnliche Antwort, aber hier ist es sehr knapp. Funktioniert in Opera, Chrome, Safari und Firefox, höchstwahrscheinlich auch IE?

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

Eine andere Möglichkeit ist die Verwendung vonHR. Aber, und hier ist der listige Teil, macht ihn unsichtbar.

Somit:

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

Um einen saubereren BR-Bruch zu erzeugen, der mit HR simuliert wird, funktioniert Btw in allen Browsern !!

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

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

25

Ich hatte gerade dieses Problem und bin damit umgegangen 

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

sie können auf dieses <p>-Element eine Zeilenhöhe anwenden, sodass die Zeilen größer werden.

12
yoda

Ich habe das :before:after CSS2-Pseudoelement noch nicht ausprobiert, hauptsächlich, weil es nur in IE8 _/(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 on QuirksMode .

6

Und denken Sie daran, dass (mis) die Verwendung des <hr>-Tags wie vorgeschlagen irgendwo den <p>-Tag beendet, vergessen Sie also diese Lösung.
Wenn z. Etwas ist auf dem umgebenden <p> gestylt, dieser Stil ist für den Rest des Inhalts nach dem Einfügen des <hr> nicht mehr verfügbar.

4
niels

Interessanterweise wird das break-Tag wie folgt in voller Form geschrieben:

<br></br>

dann die CSS-Zeilenhöhe: 145%. Wenn das break-Tag geschrieben wird als:

<br> or 
<br/> 

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

4
keithphw

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

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

Das funktionierte aber nicht bei Chrom oder Firefox.

Ich dachte nur, ich würde das erwähnen, falls es jemandem in den Sinn kam und ich ihnen die Mühe ersparen würde.

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

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

Zeilenumbrüche, Schriftgröße funktioniert in Firefox und Safari anders. 

3
DeFliGra

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

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

Michael und Yoda haben beide recht. Was Sie tun können, ist das <p>-Tag, das als Block-Tag den folgenden Block mit einem unteren Rand versetzt. So können Sie etwas ähnliches tun, um größere Abstände zu erzielen:

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

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

3

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

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

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

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

3
robinwkurtz

<br /> nimmt so viel Platz wie eine textgefüllte Zeile Ihres <p>, dies kann nicht geändert werden. Wenn Sie größer sein möchten, bedeutet dies, dass Sie sich in Absatz trennen möchten. Fügen Sie also weitere <p> hinzu. Vergiss nicht, die semantischste zu sein, die du kannst;)

2

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 beim Verwenden 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 (wissen jedoch, dass dies Auswirkungen auf alles hat, das diese Eigenschaft verwendet) oder Sie können einen Inline-Stil zum Überschreiben des CSS verwenden.

1
Daniel Siddall

Ich musste eine Lösung entwickeln, um HTML in PDF zu konvertieren und den Text vertikal in Tabellenzellen zu zentrieren, aber es funktionierte nichts, außer die einfache Eingabe <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>
1
Damir Olejar

Versuchen Sie, den CSS-Code line-height für Ihr p-Tag zu verwenden, das das br-Tag enthält. Denken Sie daran, dass Sie id Ihre p-Tags verwenden können, wenn Sie sie isolieren möchten. Es kann jedoch besser sein, eine div für die Isolation IMO zu verwenden.

1
Drizien

Sie scheinen nicht in der Lage zu sein, die Höhe eines BR einzustellen, aber Sie können es mit Hilfe des Displays zuverlässig verschwinden lassen: none

Kam auf dieser Seite bei der Suche nach einer Lösung für Folgendes:

Ich habe eine Situation, in der das Third Party Payment Gateway (Worldpay) nur die Zahlungsseiten mit maximal 10.000 CSS und HTML (kein Skript erlaubt) anpassen kann, die in den Hauptteil ihrer Vorlage eingefügt werden In Verbindung mit ihrer DTD, die den IE7/8 in den Quirks-Modus zwingt, wird die Browser-Anpassung so hart, wie es nur geht!

Das Deaktivieren von BR macht die Dinge konsistenter ...

1
Aaron Davidson

sie können auch die Eigenschaft "block-quote" in CSS verwenden. Auf diese Weise werden die einzelnen Zeilen nicht beeinflusst, sondern Sie können Parameter nur für die Unterbrechungen zwischen Absätzen oder "Anführungszeichen" festlegen. 

AKTUALISIEREN:
Ich stehe korrigiert. "blockquote" ist eigentlich eine HTML-Eigenschaft. Sie verwenden es genauso wie <p> und </ p> für Ihre Arbeit. Sie könnten dann die Parameter für Ihr Block-Zitat in css einstellen 

blockquote { margin-top: 20px }

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

1
Jonn

Verwenden Sie <div>

<div>Content 1</div>Content 2

Dies ermöglicht eine neue Linie ohne vertikalen Abstand.

Das wird

<div>Content 1</div>Content 2

1
Josh Ginn

ich verwende diese Methoden, aber ich weiß nicht, ob Browserübergreifend ist

================== 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: "" }
1
T.Todua

Beantworten einer allgemeineren Ebene für alle, die hier gelandet sind, da sie Probleme mit dem Abstand <br> beheben. Ich muss viele Resets durchführen, um Pixel perfekt zu erreichen. 

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

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

br {
    content: " ";
    display: block;
    margin: 0.25em 0;
}
0
JGallardo
<span style="line-height:40px;"><br></span> 

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

0
Liam

Wie wäre es, einfach einen Absatz anstelle des Zeilenumbruchs hinzuzufügen?

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

Dann können Sie die Zeilenhöhe oder den Abstand oder was auch immer für dieses p angeben

0
user7212232

<br> ist für einen Zeilenumbruch. 
<br /> steht auch für Zeilenumbrüche, das "/" ist optional für void-Elemente oder für xhtml erforderlich. 
Mit <br></br> fügen Browser zwei Zeilenumbrüche ein, da beide "praktisch" gleich sind. 
Es gibt keine Möglichkeit, den Zeilenumbruch zu vergrößern, da dies nur ein Zeilenumbruch ist.
Verwenden Sie ein div mit der Gültigkeitsprüfung "hidden" (<div style="vilibility:hidden; line-height:150%;"</div>) oder besser noch einen Absatz.

0
dorogz

Wenn der Zweck darin besteht, nach dem <br>-Tag ein wenig mehr vertikales Leerzeichen hinzuzufügen, ohne den logischen Absatz zu brechen, wird der Trick in etwa so ausgeführt. Es funktioniert gut in allen Browsern:

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

Hier ist eine Demo-Seite, die einige andere Variationen des Themas enthält:

http://www.burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

0
Dave Burton

Dies war der Trick für mich, wenn ich den Stilabstand nicht mit dem span-Tag erreichen konnte:

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

Ich habe es mit einer Kombination von Lösungen in IE7 arbeiten lassen, aber hauptsächlich den Br in DIV verpackt, wie Nigel und andere es vorgeschlagen hatten. Id und run at = "server" hinzugefügt, damit ich das BR beim Entfernen des Kontrollkästchens aus der Kontrollkästchenzeile entfernen konnte.

.narrow {
    display: block;
    margin: 0px;
    line-height: 0px;
    content: " "; 
}
<div class="narrow" run at="server"><br></br></div>
0
Jon Reedholm

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>
0
Miloud Eloumri