attribute - strong html

Agregando entidades HTML usando contenido CSS

Question

¿Cómo se usa la propiedad de content CSS para agregar entidades html?

Usar algo como esto simplemente imprime   A la pantalla en lugar del espacio no rotura:

.breadcrumbs a:before {
    content: '' '';
}

Answer 1

CSS no es HTML.   es una referencia de caracteres con nombre en HTML; equivalente a la referencia de carácter numérico decimal   . 160 es el punto de código decimal del carácter NO-BREAK SPACE en Unicode (o UCS-2 ; consulte la Especificación HTML 4.01 ). La representación hexadecimal de ese punto de código es U + 00A0 (160 = 10 × 16 ¹ + 0 × 16 ⁰ ). Lo encontrará en las tablas de códigos de Unicode y en la base de datos de caracteres .

En CSS, debe usar una secuencia de escape Unicode para dichos caracteres, que se basa en el valor hexadecimal del punto de código de un carácter. Así que necesitas escribir

.breadcrumbs a:before {
  content: ''/a0'';
}

Esto funciona siempre que la secuencia de escape sea la última en un valor de cadena. Si los caracteres siguen, hay dos formas de evitar la mala interpretación:

a) (mencionado por otros) Use exactamente seis dígitos hexadecimales para la secuencia de escape:

.breadcrumbs a:before {
  content: ''/0000a0foo'';
}

b) Agregue un carácter de espacio en blanco (por ejemplo, espacio) después de la secuencia de escape:

.breadcrumbs a:before {
  content: ''/a0 foo'';
}

(Dado que f es un dígito hexadecimal, /a0f significaría GURMUKHI LETTER EE aquí, o si tiene una fuente adecuada).

El espacio en blanco delimitador se ignorará, y esto se mostrará foo , donde el espacio que se muestra aquí sería un carácter de espacio libre.

El enfoque de espacio en blanco ( ''/a0 foo'' ) tiene las siguientes ventajas sobre el enfoque de seis dígitos ( ''/0000a0foo'' ):

• es más fácil de escribir , porque los ceros iniciales no son necesarios y no es necesario contar los dígitos;
• es más fácil de leer , porque hay espacios en blanco entre la secuencia de escape y el siguiente texto, y no es necesario contar los dígitos;
• requiere menos espacio , porque los ceros iniciales no son necesarios;
• es compatible con versiones posteriores, ya que Unicode que admite puntos de código más allá de U + 10FFFF en el futuro requeriría una modificación de la Especificación CSS.

Por lo tanto, para mostrar un espacio después de un personaje escapado, use dos espacios en la hoja de estilos -

.breadcrumbs a:before {
  content: ''/a0  foo'';
}

- o hacerlo explícito:

.breadcrumbs a:before {
  content: ''/a0/20 foo'';
}

Vea CSS 2.1, sección "4.1.3 Caracteres y estuche" para más detalles.

Answer 2

En CSS debe usar una secuencia de escape Unicode en lugar de entidades HTML. Esto se basa en el valor hexadecimal de un personaje.

Descubrí que la forma más fácil de convertir un símbolo a su equivalente hexadecimal es, por ejemplo, desde ▾ ( ▾ ) a /25BE utilizar la calculadora de Microsoft =)

Sí. Habilite el modo de programadores, active el sistema decimal, ingrese 9662 , luego cambie a hexadecimal y obtendrá 25BE . Luego simplemente agrega una barra invertida al principio.

Answer 3

Hay una forma de pegar un nbsp : abrir CharMap y copiar el carácter 160 . Sin embargo, en este caso probablemente lo espacie con relleno, como este:

.breadcrumbs a:before { content: ''>''; padding-right: .5em; }

Es posible que deba configurar la display:inline-block ruta de display:inline-block o algo así.

Answer 4

Por ejemplo :

http://character-code.com/arrows-html-codes.php

Ejemplo: si quieres seleccionar tu personaje, seleccioné "& # 8620" "& # x21ac" (usamos valores HEX )

.breadcrumbs a:before {
    content: ''/0021ac'';
}

Resultado: ↬

Eso es :)

Answer 5

Sé que esta es una publicación bastante antigua, pero si el espacio es todo lo que busca, ¿por qué no simplemente?

.breadcrumbs a::before {
    content: ''>'';
    margin-left: 8px;
    margin-right: 8px;
}

He usado este método antes. Se ajusta perfectamente a otras líneas con ">" a su lado en mis pruebas.

Answer 6

Tienes que usar el Unicode escapado:

Me gusta

.breadcrumbs a:before {
    content: ''/0000a0'';
}

Más información en: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

Answer 7

Usa el código hexadecimal para un espacio que no se rompa. Algo como esto:

.breadcrumbs a:before {
    content: ''>/00a0'';
}

Answer 8

Actualización : PointedEars menciona que el soporte correcto para   en todas las situaciones css seria
''/a0 '' implica que el espacio es un terminador de la cadena hex y se absorbe por la secuencia escapada. Además, señaló esta descripción autoritaria que parece una buena solución al problema que describí y solucioné a continuación.

Lo que necesitas hacer es usar el Unicode escapado. A pesar de lo que le han dicho, /00a0 no es un /00a0 perfecto para   dentro de CSS; así que prueba:

content:''>/a0 '';          /* or */
content:''>/0000a0'';       /* because you''ll find: */
content:''No/a0 Break'';    /* and */
content:''No/0000a0Break''; /* becomes No Break as opposed to below */

Específicamente utilizando /0000a0 como   . Si lo intentas, como lo sugieren mathieu y millikin:

content:''No/00a0Break''   /* becomes No਋reak */

Lleva la B a los caracteres escapados del hex. Lo mismo ocurre con 0-9a-fA-F.

Answer 9

Aquí hay dos maneras:

• En HTML:

  <div class="ics">&#9969;</div>

Esto resultará en ⛱

• En Css:

  .ics::before {content: "/9969;"}

con el código HTML <div class="ics"></div>

Esto también resulta en ⛱