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

Utilice overflow-wrap: break-word; mögen:

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

Answer 2

Vielleicht hat jemand das gleiche Problem wie ich:

Ich war in einem Element mit display: flex also musste ich flex-direction: column .

Answer 3

Für eine Liste von Links

Die anderen Antworten bieten einige gute Möglichkeiten, je nach Situation Zeilenumbrüche einzufügen. Es ist jedoch zu beachten, dass die :after Selektor ist eine der besseren Möglichkeiten, dies zu tun für CSS-Kontrolle über Listen von Links (und ähnliche Dinge), aus den unten genannten Gründen.

Hier ein Beispiel, das von einem Inhaltsverzeichnis ausgeht:

<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 besser kompatibel ist. Sie trennt Stil und Inhalt nicht so stark, erfordert mehr Code, und es kann Fälle geben, in denen Sie nachträglich Umbrüche hinzufügen möchten. Trotzdem ist es eine gute Lösung, besonders 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 von den Leerzeichen im HTML-Code ist die Ausgabe die gleiche (gegenüber pre )
• Den Elementen wird keine zusätzliche Füllung hinzugefügt (siehe NickG's display:block Kommentare)
• Sie können leicht zwischen horizontalen und vertikalen Listen von Links mit einigen gemeinsamen CSS umschalten, ohne in jede HTML-Datei gehen zu müssen, um eine Stiländerung vorzunehmen
• Nein float o clear Stile, die den umgebenden Inhalt beeinflussen
• Der Stil ist vom Inhalt getrennt (vgl. <br/> o pre mit fest kodierten Pausen)
• Dies kann auch für lose Verbindungen mit a.toc:after y <a class="toc">
• Sie können mehrere Umbrüche und sogar Präfix/Suffix-Text hinzufügen

Answer 4

Einstellung einer br Tag an display: none ist hilfreich, aber dann kann man bei WordsRunTogether landen. Ich habe es als hilfreicher empfunden, es stattdessen durch ein Leerzeichen zu ersetzen, etwa so:

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: ' ';}
}

Answer 5

Ich mag sehr einfache Lösungen, hier ist eine weitere:

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

und CSS:

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