Wie kann man einen Zeilenumbruch in css durchführen, ohne <br /> zu verwenden?

Question

Wie erreicht man die gleiche Leistung ohne <br> ?

<p>hello <br> How are you </p>

Ausgabe:

hello
How are you

Answer 1

Sie können verwenden white-space: pre; damit sich Elemente wie <pre> , wodurch die Zeilenumbrüche erhalten bleiben. Beispiel:

p {
  white-space: pre;
}

<p>hello 
How are you</p>

Beachten Sie, dass dies nur im IE8+ funktioniert.

Answer 2

Unmöglich mit der gleichen HTML-Struktur, Sie müssen etwas haben, um zu unterscheiden zwischen Hello y How are you .

Ich empfehle die Verwendung von span s, die Sie dann als Blöcke anzeigen (genau wie eine <div> tatsächlich).

p span {
  display: block;
}

<p><span>hello</span><span>How are you</span></p>

Answer 3

Utilice <br/> wie üblich, aber verstecken Sie es mit display: none wenn Sie es nicht wollen.

Ich gehe davon aus, dass die meisten Leute, die auf diese Frage stoßen, css / responsive design verwenden wollen, um zu entscheiden, ob ein Zeilenumbruch an einer bestimmten Stelle erscheint oder nicht. (und haben nichts Persönliches gegen <br/> )

Auch wenn es nicht auf den ersten Blick ersichtlich ist, können Sie tatsächlich display:none zu einer <br/> Tag, um es auszublenden, was die Verwendung von Medienabfragen in Verbindung mit semantischen BR-Tags ermöglicht.

<div>
  The quick brown fox<br />
  jumps over the lazy dog
</div>

@media screen and (min-width: 20em) {
  br {
    display: none; /* hide the BR tag for wider screens (i.e. disable the line break) */
  }
}

Dies ist bei responsivem Design nützlich, wenn Sie Text in zwei Zeilen mit einem exakten Umbruch zwingen müssen.

jsfiddle-Beispiel

Answer 4

Es gibt mehrere Möglichkeiten, die Behandlung von Leerzeichen und Zeilenumbrüchen zu definieren. Wenn man den Inhalt z.B. in ein <p> Tag ist es ziemlich einfach, alles zu bekommen, was man will.

Für Beibehaltung von Zeilenumbrüchen, aber nicht von Leerzeichen verwenden. pre-line (nicht pre ) wie in:

<style>
 p {
     white-space: pre-line; /* collapse WS, preserve LB */
   }
</style>

<p>hello
How are you</p>

Wenn Sie ein anderes Verhalten wünschen, wählen Sie eine der folgenden Optionen (WS=WhiteSpace, LB=LineBreak):

     white-space: normal;   /* collapse WS, wrap as necessary, collapse LB */
     white-space: nowrap;   /* collapse WS, no wrapping,       collapse LB */
     white-space: pre;      /* preserve WS, no wrapping,       preserve LB */
     white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
     white-space: inherit;  /* all as parent element */

QUELLE: W3 Schulen

Answer 5

El " \a " Befehl in CSS erzeugt einen Wagenrücklauf. Dies ist CSS, nicht HTML, also sollte es näher an dem sein, was Sie wollen: kein zusätzlicher Aufschlag .

In einem blockquote Das folgende Beispiel zeigt sowohl den Titel als auch den Quelllink an und trennt die beiden durch einen Wagenrücklauf ( "\a" ) :

blockquote[title][cite]:after {
  content:attr(title)"\a"attr(cite)
}