Ausgabe:

Hallo
Wie geht es Ihnen

Code:

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

Wie erreicht man die gleiche Leistung ohne <br>?

Mit der gleichen HTML-Struktur unmöglich, müssen Sie etwas zwischen Hellound unterscheiden können How are you.

Ich schlage vor, spans zu verwenden, die Sie dann als Blöcke anzeigen (genau wie a <div>tatsächlich).

p span {
  display: block;
}

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

Sie können verwenden white-space: pre;, um Elemente so zu gestalten <pre>, dass Zeilenumbrüche erhalten bleiben. Beispiel:

p {
  white-space: pre;
}

<p>hello 
How are you</p>

Beachten Sie für IE, dass dies nur in IE8 + funktioniert.

Verwenden Sie es <br/>wie gewohnt, aber verstecken Sie es, display: nonewenn Sie es nicht möchten.

Ich würde erwarten, dass die meisten Leute, die diese Frage finden, mithilfe von CSS / Responsive Design entscheiden möchten, ob an einer bestimmten Stelle ein Zeilenumbruch auftritt oder nicht. (und nichts persönliches dagegen haben <br/>)

Obwohl dies nicht sofort offensichtlich ist, können Sie es tatsächlich display:noneauf ein <br/>Tag anwenden , um es auszublenden. Dies ermöglicht die Verwendung von Medienabfragen zusammen mit semantischen BR-Tags.

 <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 nützlich bei reaktionsschnellen Designs, bei denen Sie Text genau in zwei Zeilen zwingen müssen.

http://jsfiddle.net/nNbD3/1/

Es gibt verschiedene Optionen zum Definieren der Behandlung von Leerzeichen und Zeilenumbrüchen. Wenn man den Inhalt zB in ein <p>Tag einfügen kann, ist es ziemlich einfach, das zu bekommen, was man will.

Um Zeilenumbrüche, aber keine Leerzeichen beizubehalten, verwenden Sie pre-line(nicht pre) wie in:

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

<p>hello
How are you</p>

Wenn ein anderes Verhalten gewünscht wird, wählen Sie eines davon aus (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

Der Befehl "\ a" in CSS generiert einen Wagenrücklauf. Dies ist CSS, nicht HTML, daher sollte es näher an dem sein, was Sie möchten: kein zusätzliches Markup .

In einem Blockzitat werden im folgenden Beispiel sowohl der Titel als auch der Quelllink angezeigt und die beiden durch einen Wagenrücklauf ( "\a") getrennt:

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

Verwenden Sie beim CSS den Code

p {
    white-space: pre-line;
}

Mit diesem Code CSS wird jede Eingabe innerhalb des P-Tags eine Unterbrechungszeile im HTML-Code sein.

Aufbauend auf dem, was zuvor gesagt wurde, ist dies eine reine CSS-Lösung, die funktioniert.

<style>
  span {
    display: inline;
  }
  span:before {
    content: "\a ";
    white-space: pre;
  }
</style>
<p>
  First line of text. <span>Next line.</span>
</p>

<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------

ODER

<div style="white-space:pre">  <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div>                         <-----------------------------------

Quelle: https://stackoverflow.com/a/36191199/2377343

Weisen Sie einem Element anschließend einen Zeilenumbruch zu:

display:block;

Nicht schwebende Elemente nach einem Element auf Blockebene werden in der nächsten Zeile angezeigt. Viele Elemente, wie z. B. <p> und <div>, sind bereits Elemente auf Blockebene, sodass Sie diese nur verwenden können.

Dies ist zwar gut zu wissen, hängt jedoch mehr vom Kontext Ihres Inhalts ab. In Ihrem Beispiel möchten Sie kein CSS verwenden, um einen Zeilenumbruch zu erzwingen. Das <br /> ist angemessen, da das p-Tag semantisch am besten für den angezeigten Text geeignet ist. Mehr Markup, nur um CSS aufzuhängen, ist unnötig. Technisch gesehen ist es nicht gerade ein Absatz, aber es gibt kein <greeting> -Tag. Verwenden Sie also das, was Sie haben. Beschreiben Sie Ihre Inhalte gut mit HTML ist viel wichtiger - nachdem Sie haben , dann herauszufinden , wie es hübsch aussehen zu machen.

Hier ist eine schlechte Lösung für eine schlechte Frage, aber eine, die buchstäblich den Auftrag erfüllt:

p {
    width : 12ex;
}

p:before {
    content: ".";
    float: right;
    padding-left: 6ex;
    visibility: hidden;
}

Für eine Liste von Links

Die anderen Antworten bieten je nach Situation einige gute Möglichkeiten zum Hinzufügen von Zeilenumbrüchen. Es sollte jedoch beachtet werden, dass der :afterSelektor eine der besseren Möglichkeiten ist, dies für die CSS-Kontrolle über Listen von Links zu tun unten genannten Gründen (und ähnlichen Dingen) .

Hier ein Beispiel unter der Annahme eines Inhaltsverzeichnisses:

<style type="text/css">
    .toc a:after{ content: "\a"; white-space: pre; }
</style>

<span class="toc">
    <a href="#a1">Item A1</a> <a href="#a2">Item A2</a>
    <a href="#b1">Item B1</a> <a href="#b2">Item B2</a>
</span>

Und hier ist die Technik von Simon_Weaver, die einfacher und kompatibler ist. Es trennt Stil und Inhalt nicht so sehr, erfordert mehr Code und es kann Fälle geben, in denen Sie nachträglich Pausen hinzufügen möchten. Trotzdem eine großartige Lösung, insbesondere für ältere IE.

<style type="text/css">
    .toc br{ display: none; } /* comment out for horizontal links */
</style>

<span class="toc">
    <a href="#a1">Item A1</a><br/> <a href="#a2">Item A2</a><br/>
    <a href="#b1">Item B1</a><br/> <a href="#b2">Item B2</a><br/>
</span>

Beachten Sie die Vorteile der oben genannten Lösungen:

• Unabhängig vom Leerzeichen im HTML ist die Ausgabe dieselbe (vs. pre )
• Den Elementen wird keine zusätzliche Polsterung hinzugefügt (siehe NickGs) display:block Kommentare von ).
• Sie können mit einigen gemeinsam genutzten CSS problemlos zwischen horizontalen und vertikalen Listen von Links wechseln, ohne in jeder HTML-Datei eine Stiländerung vornehmen zu müssen
• Nein floatoder clearStile, die den umgebenden Inhalt beeinflussen
• Der Stil ist vom Inhalt getrennt (vs. <br/>oder premit fest codierten Unterbrechungen).
• Dies kann auch für lose Links mit a.toc:afterund funktionieren<a class="toc">
• Sie können mehrere Unterbrechungen und sogar Präfix- / Suffix-Text hinzufügen

Vielleicht hat jemand das gleiche Problem wie ich:

Ich war in einem Element mit, display: flexalso musste ich verwenden flex-direction: column.

Ein brTag auf setzendisplay: none ist hilfreich, aber dann können Sie mit WordsRunTogether enden. Ich fand es hilfreicher, es stattdessen durch ein Leerzeichen zu ersetzen, wie folgt:

HTML:

<h1>
    Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>

CSS:

@media (min-device-width: 1281px){
    h1 br {content: ' ';}
    h1 br:after {content: ' ';}
}

Wie wäre es mit <pre>Tag?

Quelle: http://www.w3schools.com/tags/tag_pre.asp

Sie können beispielsweise viel Auffüllen hinzufügen und erzwingen, dass Text in eine neue Zeile aufgeteilt wird

p{
    padding-right: 50%;
}

Funktionierte gut für mich in einer Situation mit reaktionsschnellem Design, in der nur innerhalb eines bestimmten Breitenbereichs Text aufgeteilt werden musste.

Ich mag sehr einfache Lösungen, hier ist noch eine

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

und css

p {
 display: flex;
 flex-direction: column;
}

Verwenden Sie Overflow-Wrap: break-word; mögen :

.yourelement{
overflow-wrap: break-word;
}

Sie müssen den Inhalt innerhalb deklarieren <span class="class_name"></span>. Danach wird die Linie unterbrochen.

\A bedeutet Zeilenvorschubzeichen.

.class_name::after {
  content: "\A";
  white-space: pre;
}

Die Antworten von Vincent Robert und Joey Adams sind gültig. Wenn Sie das Markup jedoch nicht ändern möchten, können Sie einfach ein einfügen<br /> mit Javascript .

In CSS ist dies nicht möglich, ohne das Markup zu ändern.

In meinem Fall brauchte ich eine Eingabetaste, um einen Zeilenumbruch davor zu haben.
Ich habe den folgenden Stil auf die Schaltfläche angewendet und es hat funktioniert:

clear:both;

Falls dies jemandem hilft ...

Sie könnten dies tun:

<p>This is an <a class="on-new-line">inline link</a>?</p>

Mit diesem CSS:

a.on-new-line:before { 
  content: ' '; 
  font-size:0; 
  display:block;
  line-height:0;
}

Die Verwendung  anstelle von Leerzeichen verhindert eine Unterbrechung.

<span>I&nbsp;DONT&nbsp;WANT&nbsp;TO&nbsp;BREAK&nbsp;THIS&nbsp;LINE&nbsp;UP, but this text can be on any line.</span>

Dies funktioniert in Chrome:

p::after {
    content: "-";
    color: transparent;
    display: block;
}

Ich vermute, Sie wollten keinen Haltepunkt verwenden, da dieser immer die Linie unterbricht. Ist das korrekt? Wenn ja, wie wäre es, wenn Sie <br />Ihrem Text einen Haltepunkt hinzufügen und ihm eine Klasse wie <br class="hidebreak"/>die Medienabfrage direkt über der Größe geben, die er unterbrechen soll, um den zu verbergen<br /> damit er bei einer bestimmten Breite bricht, aber über dieser Breite inline bleibt.

HTML:

<p>
The below line breaks at 766px.
</p>

<p>
 This is the line of text<br class="hidebreak"> I want to break.
</p>

CSS:

@media (min-width: 767px) {
  br.hidebreak {display:none;}
}

https://jsfiddle.net/517Design/o71yw5vd/

Der Code kann sein

<div class="text-class"><span>hello</span><span>How are you</span></div>

CSS wäre

.text-class {
     display: flex;
     justify-content: flex-start;
     flex-direction: column;
     align-items: center;
 }

Tu es nicht. Wenn Sie einen harten Zeilenumbruch wünschen, verwenden Sie einen.