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

Ma come lo fai?

È ansible utilizzare la sequenza di escape \A nel contenuto generato da psuedo. Leggi di più nelle specifiche CSS2.

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

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

nota: \A indica la fine di una riga.

ps Un altro trattamento da fare

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

Se #restart è un elemento in linea (ad esempio , etc), puoi trasformarlo in un elemento di blocco usando:

 #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 agisce come un’interruzione di riga solo prima di un elemento e non dopo. Potresti forse causare un interruzione di riga 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'; } #restart:before { content: 'a load of non-breaking spaces'; } ma probabilmente non è una buona idea nel caso generale.

Questo funziona per me:

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

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

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

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

C’è un elemento pseudo ::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:

 $('
').insertBefore('#restart');

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

I CSS seguenti hanno funzionato per me:

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

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

Ecco l’HTML:

 
lorem ipdum dolor sit amit e pluribus unum

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

Non ho avuto fortuna con l’inserimento di una pausa con: prima. La mia soluzione è stata quella di aggiungere un intervallo con una class e inserire la pausa all’interno dell’intervallo. Quindi cambia la class da visualizzare: none; o display: blocca se necessario.

HTML

  

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 i tag
e triggersrli \ off con i CSS come tutti gli altri:

   just a text line
for demonstration

Puoi anche usare l’ quadro HTML pre-codificata per un’interruzione di riga nei tuoi contenuti e avrà lo stesso effetto.

Aggiungi un margin-top:20px; per #restart . O qualunque sia il divario di dimensioni che ritieni appropriato. Se si tratta di un elemento inline, dovrai aggiungere display:block o display:inline-block anche se non penso che il inline-block su versioni precedenti di IE.

Invece di aggiungere manualmente un’interruzione di riga in qualche modo, puoi implementare il border-bottom: 1px solid #ff0000 che prenderà il bordo dell’elemento e renderà solo il border- di qualsiasi lato specificato.