Attributo dati CSS carattere di nuova riga e valore contenuto pseudoelemento

Question

È possibile avere una nuova riga in un attributo di dati?

che sto cercando di fare qualcosa di simile:

CSS:

[data-foo]:after { 
    content: attr(data-foo); 
    background-color: black; 
} 

HTML

<div data-foo="First line \a Second Line">foo</div> 

ho scoperto che "\ a" è una nuova linea nel CSS, ma ancora Non funziona per me.

Answer 1

Ecco come funziona. È necessario modificare l'attributo dati come segue:

<div data-foo='First line &#xa; Second Line'>foo</div> 

e il CSS (proof of concept):

[data-foo]:after { 
    content: attr(data-foo); 
    background-color: black; 
    color: white; 
    white-space: pre; 
    display: inline-block; 
} 

Fiddle Demo: http://jsfiddle.net/audetwebdesign/cp4RF/

Come Funziona

L'utilizzo di \a non funziona, ma l'entità HTML equivalente lo è, 
.

In base alle specifiche CSS2.1, attr(attribute-label) restituisce una stringa ma la stringa non viene analizzata dal processore CSS (non sono sicuro di cosa significhi esattamente). Suppongo che \a debba essere interpretato dal processore CSS in modo che il codice sia visualizzato come proprietà.

Al contrario, l'entità HTML viene interpretata direttamente dal browser (credo ...), quindi sembra funzionare.

Tuttavia, affinché l'avanzamento della linea funzioni, è necessario impostare white-space: pre per preservare lo spazio bianco nello pseudoelemento. Nota: potresti anche considerare pre-wrap o pre-line a seconda della natura dei tuoi contenuti.

Riferimento

Per quanto riguarda l'ottenimento del codice entità HTML per un avanzamento riga:
http://www.fileformat.info/info/unicode/char/000a/index.htm

Per quanto riguarda il valore attr() per la proprietà content:
http://www.w3.org/TR/CSS2/generate.html#content

Answer 2

è possibile utilizzare una linea di pianura rompere all'interno di un valore di attributo:

<div data-foo="First line 
Second Line">foo</div> 

I browser sono stati buggy in questo senso e le specifiche HTML non sono state abbastanza chiare su questo; discutono il significato delle interruzioni di riga nel contenuto contenuto (dove prendono come equivalente agli spazi), ma non nei valori degli attributi. In HTML5 CR, lo parsing rules for attribute values chiarisce che le interruzioni di riga vengono semplicemente aggiunte al valore dell'attributo. I browser moderni generalmente giocano secondo tali regole.

Tuttavia, quando si utilizza il valore nel CSS tramite attr(...), l'interruzione di riga verrà normalmente considerata come equivalente ad uno spazio, quindi è necessario impostare white-space sulla pseudo-elemento a un valore che rende interruzioni di riga onorato, vale a dire pre, pre-wrap o pre-line.

P.S. In HTML, la notazione \a è composta da soli due caratteri di dati, senza alcun significato speciale. La notazione 
 indicherebbe un'interruzione di riga (in particolare, LINE FEED), ma sarebbe equivalente a un'interruzione di riga effettiva in souce.

Answer 3

... e se si sta cercando di capire questo e capita di utilizzare HAML e AngularJS quindi utilizzare \n.

%a.tooltip{:"data-tip" => "Cost Per Unit: {{humanized_cost}} \n(Calculated for applicable Feature Qty.) "} 

risultati in:

Cost Per Unit: $10.54 
(Calculated for applicable Feature Qty.) 

Answer 4

approvazione, qui è un modo semplice per farlo. si dovrebbe scrivere come

data-foo='First line </br> Second Line' 

e invece di utilizzare .text(), è possibile utilizzare .html(). quando si utilizza .html(), quindi prenderà come interruzione di riga e questo dovrebbe risolvere il tuo problema.