Come inserire un'interruzione di riga prima di un elemento utilizzando CSS

Mi sembra di aver visto un modo, usando la proprietà content CSS, di inserire un tag di interruzione di riga prima di un elemento. Ovviamente questo non funziona:

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

Ma come si fa?

È possibile utilizzare la \A sequenza di escape nel contenuto generato da psuedo-element. Maggiori informazioni nelle specifiche CSS2.

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

Potrebbe anche essere necessario aggiungere white-space:pre;a #restart.

nota: \Aindica la fine di una linea.

ps Un altro trattamento da essere

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

Se #restartè un elemento inline (ad es. <span>, <em>Ecc.), Puoi trasformarlo in un elemento a blocchi usando:

#restart { display: block; }

Ciò avrà l'effetto di garantire un'interruzione di linea sia prima che dopo l'elemento.

Non è possibile che CSS inserisca qualcosa che agisce come un'interruzione di riga solo prima di un elemento e non dopo. Potresti forse causare un'interruzione di linea prima come effetto collaterale di altri cambiamenti, ad esempio float: left, o clear: leftdopo un elemento fluttuante, o anche qualcosa di pazzo come, #restart:before { content: 'a load of non-breaking spaces'; }ma questa probabilmente non è una buona idea nel caso generale.

Questo funziona per me:

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

Inserisci un carattere di nuova riga unicode nello pseudo elemento precedente:

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

I seguenti CSS hanno funzionato per me:

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

Esistono due motivi per cui non è possibile aggiungere contenuti generati tramite CSS nel modo desiderato:

1. il contenuto generato accetta il contenuto e non il markup. Il markup non verrà valutato ma solo visualizzato.

2. :beforee il :aftercontenuto generato viene aggiunto all'interno dell'elemento, quindi anche l'aggiunta di uno spazio o una lettera e la sua definizione in quanto blocknon funzionerà.

C'è uno ::outsidepseudo elemento che potrebbe fare quello che vuoi. Tuttavia, sembra che non ci sia supporto per il browser. (Leggi di più qui: http://www.w3.org/TR/css3-content/#wrapping )

La scommessa migliore è usare un po 'di jQuery qui:

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

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

Sì, totalmente fattibile ma è sicuramente un trucco totale (le persone possono darti sguardi sporchi per scrivere un codice del genere).

Ecco l'HTML:

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

Ecco il CSS:

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

Ecco il violino: http://jsfiddle.net/AprNY/

Prova quanto segue:

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

supponendo che l'altezza della linea sia di 20 px

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

Non ho avuto fortuna con l'inserimento di una pausa con: prima. La mia soluzione era quella di aggiungere un intervallo con una classe e mettere la pausa all'interno dell'intervallo. Quindi modificare la classe per visualizzare: nessuno; o visualizza: blocca secondo necessità.

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

Spero che questo ti aiuti.

Puoi popolare il tuo documento con <br>tag e attivarli \ off con css proprio come tutti gli altri:

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

Puoi anche utilizzare l'entità HTML precodificata per un'interruzione di riga 
nei tuoi contenuti e avrà lo stesso effetto.

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

https://www.w3.org/TR/CSS2/generate.html#x18 The Content Proerty, "newlines" ... p non aggiungerà margine né riempimento alla fine di p all'interno del blocco padre (ad es. corpo ›sezione› p). L'interruzione di linea "\ A" forza lo spazio della linea, un'altezza della linea in stile equivalente.

Aggiungi un margin-top:20px;a #restart. O qualunque sia il divario dimensionale che ritieni appropriato. Se è un elemento inline dovrai aggiungere display:blocko display:inline-blockanche se non credo inline-blockfunzioni su versioni precedenti di IE.

Invece di aggiungere manualmente un'interruzione di linea in qualche modo, puoi fare un attrezzo border-bottom: 1px solid #ff0000che prenderà il bordo dell'elemento e renderizzerà solo il border-<side>lato specificato.