it-swarm.it

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

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

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

Ma come lo fai?

153
mheavers

È possibile utilizzare \Aescape sequence nel contenuto generato da psuedo-element. lteriori informazioni nella specifica CSS2.

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

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

nota: \A indica la fine di una riga.

post scriptum Un altro trattamento da fare

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

Se #restart è un elemento in linea (ad esempio <span>, <em> etc), puoi trasformarlo in un elemento di blocco utilizzando:

#restart { display: block; }

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

Non c'è un modo per inserire CSS qualcosa che funzioni come un'interruzione di riga only prima di un elemento e non dopo. Potresti forse causare un'interruzione di linea prima come effetto collaterale di altre modifiche, ad esempio float: left, o clear: left dopo un elemento float, 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.

33
bobince

Questo funziona per me:

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

Basta inserire un carattere di fine riga unicode all'interno dell'elemento pseudo precedente:

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

Esistono due motivi per cui non è possibile aggiungere contenuto generato 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. Il contenuto generato :before e :after viene aggiunto all'interno dell'elemento, quindi anche l'aggiunta di uno spazio o una lettera e la definizione di block non funzionerà.

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

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

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

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

10
Jason Gennaro

I CSS seguenti hanno funzionato per me:

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

Sì, totalmente fattibile, ma è sicuramente un trucco totale (le persone potrebbero darti sguardi sporchi per aver scritto questo codice).

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/

4
hammerbrostime

Prova quanto segue:

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

supponendo che tu voglia 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;
  }
1
Kareem

Non ho avuto fortuna con l'inserimento di una pausa con: prima. La mia soluzione era quella di aggiungere una campata con una classe e mettere la pausa all'interno della portata. Quindi cambia la classe da visualizzare: none; o display: blocca se necessario.

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.

1
Roger

Puoi popolare il tuo documento con i tag <br> e attivarli\off con css come qualsiasi altro:

<style>
.hideBreaks {
 display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>
1
JackHammer
body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }

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

0
Mark Stewart

Puoi anche utilizzare l'entità HTML pre-codificata per un'interruzione di riga &#10; nei tuoi contenuti e avrà lo stesso effetto.

0
Henry Gibson