So fügen Sie mit CSS einen Zeilenumbruch vor einem Element ein

Ich habe das Gefühl, mithilfe der CSS-Content-Eigenschaft einen Zeilenumbruch-Tag vor einem Element einzufügen. Offensichtlich funktioniert das nicht:

#restart:before { content: '<br/>'; }

Aber wie machst du das?

Es ist möglich, die \A Escape-Sequenz im von Pseudoelementen generierten Inhalt zu verwenden. Lesen Sie mehr in der CSS2-Spezifikation.

#restart:before { content: '\A'; }

Sie können auch hinzufügen müssen white-space:pre;zu #restart.

Hinweis: \ABezeichnet das Ende einer Zeile.

ps Eine andere Behandlung zu sein

:before { content: ' '; display: block; }

Wenn #restartein Inline - Element (zB <span>, <em>etc) , dann können Sie es in einem Blockelement drehen mit:

#restart { display: block; }

Dies bewirkt einen Zeilenumbruch sowohl vor als auch nach dem Element.

Es gibt keine Möglichkeit, CSS etwas einfügen zu lassen, das nur vor einem Element und nicht danach wie ein Zeilenumbruch wirkt . Sie könnten vielleicht einen Zeilenumbruch vorher als Nebeneffekt anderer Änderungen verursachen, zum Beispiel float: leftoder clear: leftnach einem schwebenden Element oder sogar etwas Verrücktem, #restart:before { content: 'a load of non-breaking spaces'; }aber dies ist im allgemeinen Fall wahrscheinlich keine gute Idee.

Das funktioniert bei mir:

#restart:before {
    content: ' ';
    clear: right;
    display: block;
}

Fügen Sie einfach ein Unicode-Zeilenumbruchzeichen in das vorherige Pseudoelement ein:

#restart:before { content: '\00000A'; }

Folgendes CSS hat für mich funktioniert:

/* newline before element */
#myelementId:before{
    content:"\a";
    white-space: pre;
}

Es gibt zwei Gründe, warum Sie generierte Inhalte nicht wie gewünscht über CSS hinzufügen können:

1. Generierter Inhalt akzeptiert Inhalt und kein Markup. Markup wird nicht ausgewertet, sondern nur angezeigt.

2. :beforeund :aftergenerierter Inhalt wird innerhalb des Elements hinzugefügt, sodass selbst das Hinzufügen eines Leerzeichens oder Buchstabens und das Definieren als blocknicht funktioniert.

Es gibt ein ::outsidePseudoelement, das tun kann, was Sie wollen. Es scheint jedoch keine Browserunterstützung zu geben. (Lesen Sie hier mehr: http://www.w3.org/TR/css3-content/#wrapping )

Am besten verwenden Sie hier ein bisschen jQuery:

$('<br />').insertBefore('#restart');

Beispiel: http://jsfiddle.net/jasongennaro/sJGH9/1/

Ja, absolut machbar, aber es ist definitiv ein totaler Hack (Leute sehen dich vielleicht schmutzig an, wenn du solchen Code schreibst).

Hier ist der HTML:

<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>

Hier ist das CSS:

#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }

Hier ist die Geige: http://jsfiddle.net/AprNY/

Versuche Folgendes:

#restart::before {
  content: '';
  display: block;
}

Angenommen, Sie möchten, dass die Zeilenhöhe 20 px beträgt

  .restart:before { 
     content: 'First Line';
     padding-bottom:20px;
  }
  .restart:after { 
    content: 'Second-line';
    position:absolute;
    top:40px;
  }

Ich hatte überhaupt kein Glück, eine Pause einzulegen mit: vor. Meine Lösung bestand darin, eine Spanne mit einer Klasse hinzuzufügen und die Pause innerhalb der Spanne zu platzieren. Ändern Sie dann die Klasse in die Anzeige: keine; oder Anzeige: Block nach Bedarf.

HTML

    <div>
         <span class="ItmQty"><br /></span>
         <span class="otherclass">
              <asp:Label ID="QuantityLabel" runat="server" Text="Qty: ">      
              </asp:Label>
         </span>
         <div class="cartqty">
              <asp:TextBox ID="QuantityTextBox" runat="server" Text='<%# Bind("Quantity","{0:#}") %>' Width="50"></asp:TextBox>

         </div>
    </div>

CSS

@media only screen and (min-width: 854px)
{
    .ProjItmQty
    {
        display: block;
        clear: both;
    }
}
@media only screen and (min-width: 1003px)
{
    .ProjItmQty
    {
        display: none;
    }
}

Hoffe das hilft.

Sie können Ihr Dokument mit <br>Tags füllen und diese wie alle anderen mit CSS aktivieren / deaktivieren:

<style>
.hideBreaks {
 display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>

Sie können die vorcodierte HTML-Entität auch für einen Zeilenumbruch 
in Ihrem Inhalt verwenden. Dies hat den gleichen Effekt.

body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }

https://www.w3.org/TR/CSS2/generate.html#x18 Die Inhaltsangabe "Zeilenumbrüche" ... p fügt am Ende von p innerhalb des übergeordneten Blocks (z. B. body ›section›) weder Rand noch Abstand hinzu. p). Der Zeilenumbruch "\ A" erzwingt den Zeilenabstand, der der Zeilenhöhe entspricht.

Fügen Sie ein margin-top:20px;zu hinzu #restart. Oder welche Größe auch immer Sie für angemessen halten. Wenn es sich um ein Inline-Element handelt, müssen Sie es hinzufügen display:blockoder display:inline-blockobwohl ich nicht denke, dass es inline-blockmit älteren Versionen von IE funktioniert.

Anstatt einen Zeilenumbruch manuell hinzuzufügen, können Sie auch implementieren border-bottom: 1px solid #ff0000, der den Rand des Elements übernimmt und nur die border-<side>von Ihnen angegebene Seite rendert.