html - nuevos - Los datos CSS atribuyen un nuevo valor de carácter de línea y pseudo-elemento

selectores avanzados css

Question

¿Es posible tener una nueva línea en un atributo de datos?

Estoy tratando de hacer algo como esto:

CSS:

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

HTML

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

Descubrí que "/ a" es una nueva línea en CSS, pero todavía no funciona para mí.

Answer 1

... y si estás tratando de resolver esto y HAML usando HAML y AngularJS entonces usa /n .

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

resultados en:

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

Answer 2

Aquí es cómo esto puede funcionar. Debe modificar su atributo de datos de la siguiente manera:

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

y el CSS (prueba de concepto):

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

Demostración de Fiddle: http://jsfiddle.net/audetwebdesign/cp4RF/

Cómo funciona

Usar /a no funciona, pero la entidad HTML equivalente sí lo hace, 
 .

De acuerdo con la especificación CSS2.1, attr(attribute-label) devuelve una cadena, pero la cadena no es analizada por el procesador CSS (no estoy seguro de lo que esto significa exactamente). Yo especulo que /a debe ser interpretado por el procesador CSS para que el código se muestre como propiedad.

En contraste, la entidad HTML es interpretada directamente por el navegador (supongo ...) por lo que parece funcionar.

Sin embargo, para que funcione la alimentación de línea, debe establecer white-space: pre para conservar el espacio en blanco en el pseudo-elemento. Nota: también puede considerar, a saber pre-wrap pre-line o pre-line según la naturaleza de su contenido.

Referencia

En cuanto a obtener el código de entidad HTML para un salto de línea:
http://www.fileformat.info/info/unicode/char/000a/index.htm

En cuanto al valor de attr() para la propiedad de content :
http://www.w3.org/TR/CSS2/generate.html#content

Answer 3

Bien, aquí hay una manera fácil de hacer esto. deberías escribirlo como

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

y en lugar de usar .text (), puede usar .html () . cuando use .html (), tomará un salto de línea y esto resolverá su problema.

Answer 4

Puede usar un salto de línea simple dentro de un valor de atributo:

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

Los navegadores han tenido errores al respecto, y las especificaciones HTML no han sido muy claras al respecto; discuten el significado de los saltos de línea en el contenido del elemento (donde se toman como equivalentes de espacios), pero no en los valores de los atributos. En HTML5 CR, las reglas de análisis para los valores de los atributos dejan en claro que los saltos de línea simplemente se agregan al valor del atributo. Los navegadores modernos generalmente cumplen con dichas reglas.

Sin embargo, cuando usa el valor en CSS a través de attr(...) , el salto de línea normalmente se tratará como equivalente a un espacio, por lo que necesita establecer white-space en white-space en el pseudo-elemento a un valor que haga saltos de línea honor, a saber, pre , pre-wrap o pre-line .

PS En HTML, la notación /a es solo dos caracteres de datos, sin ningún significado especial. La notación 
 denotaría un salto de línea (específicamente, ALIMENTACIÓN DE LÍNEA), pero sería simplemente equivalente a un salto de línea real en souce.