Wie kann ich mit CSS einen Zeilenumbruch einfügen nach, aber nicht vor einem element?

Beispiel:

HTML:

The quick brown fox <span class="break">{BREAK}</span> jumps over the lazy dog.

Ich will, dass dieses display:

The quick brown fox {BREAK}

jumps over the lazy dog.

Schaute ich in das display Eigenschaft, aber display:inline; nicht zu brechen und überall display:block stellt breaks auf beiden Seiten.

Ich schaute auch in die :after pseudo-Klasse, aber .break:after{content:"\000A";} endet rendering als Raum, sondern als ein line feed.

jsfiddle.net/bMKrc Wie das? Man könnte auch in diesem Beispiel, nur mit divs.
Nein, ohne änderung der HTML-Struktur.
Gibt es einen Grund, warum du nicht einfach <br> in HTML?
Ich will, dass es konfigurierbar sein, ob es ein Zeilenumbruch ist oder nicht.
SLaks Lösung ist gut, aber könnte man machen nur die span.break display block. Es ist einfacher, weniger code und cross-browser kompatibel.jsfiddle.net/bMKrc/1

InformationsquelleAutor Matt | 2013-09-30

  1. 30

    Standardmäßig werden HTML-Elemente Leerraum ignorieren.

    Sie müssen ändern:

    .break:after {
    content:"\000A";
    white-space: pre;
}
    Danke, das klappt! Ich werde annehmen, sobald die 15 Minuten abgelaufen sind.
    in meinem Fall hat es nicht funktioniert, wenn ich den text in es, warum?!
    Was redest du da? Was ist passiert?
    Könntest du erklären, was dies ist zu tun bitte? Komme ich gerade über die Antwort, und es funktioniert, aber ich möchte verstehen, was es tut. (Bitte und danke :))
    href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space" >developer.mozilla.org/en-US/docs/Web/CSS/white-space

    InformationsquelleAutor SLaks

  2. 3

    http://jsfiddle.net/bMKrc/1/

    html:

    The quick brown fox <span class="break"></span> jumps over the lazy dog.

    CSS:

    .break{
    display:block;
}

    Und das ist alles, was Sie brauchen. display:block verursachen können, es zu brechen, auf beiden Seiten, aber es nicht die Ursache gibt es eine extra Zeile. Meine Geige.

    Bitte Lesen Sie die Frage komplett, bevor Sie antwortet.
    Nur weil die OP etwas sagt, bedeutet das nicht, dass es wahr ist. Sie das gewünschte Ergebnis erzielen, mit display block. Check out my fiddle, wenn Sie mir nicht glauben.
    Im Fall es war verwirrend, "{PAUSE}" ist immer noch eigentlich ein Teil des Textes.
    Oh, das macht nicht viel Sinn, aber es ist nicht mein Projekt. Ich dachte, er wollte zeigen, wohin die Pause. Aber das rechtfertigt nicht Ihr unhöflich sein.
    ..soo, warum nicht verwenden, <br> dann?

    InformationsquelleAutor Jacques

Schreibe einen Kommentar