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

Verwenden Sie im CSS den Code

p {
  white-space: pre-line;
}

Mit diesem CSS wird jeder Eintrag innerhalb der P Tag ist eine Umbruchlinie im HTML-Code.

Answer 2

Wie bereits erwähnt, 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>

Answer 3

Um ein Element anschließend mit einem Zeilenumbruch zu versehen, weisen Sie es zu:

display:block;

Non-floated elements after a block level element will appear on the next line. Many elements, such as <p> and <div> are already block level elements so you can just use those.

Das ist zwar gut zu wissen, hängt aber eher vom Kontext Ihres Inhalts ab. In your example, you would not want to use CSS to force a line break. Das <br /> ist angemessen, weil das p-Tag semantisch am besten zu dem von Ihnen dargestellten Text passt. Mehr Markup, nur um CSS daran zu hängen, ist unnötig. Technisch gesehen ist es nicht genau einen Absatz, aber es gibt keinen <Gruß>-Tag, also verwenden Sie, was Sie haben. Es ist viel wichtiger, Ihren Inhalt mit HTMl gut zu beschreiben - nachdem Sie das getan haben entonces herausfinden, wie man es hübsch aussehen lassen kann.

Answer 4

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

オア

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

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

Answer 5

Das ist eine schlechte Lösung für eine schlechte Frage, aber eine, die die Aufgabe buchstäblich erfüllt:

p {
    width : 12ex;
}

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