Agregar entidades HTML usando contenido CSS



Answers

CSS no es HTML   es una referencia de personaje con nombre en HTML; equivalente a la referencia del 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 1 + 0 × 16 0 ). Lo encontrará en los gráficos de códigos Unicode y la base de datos de caracteres .

En CSS, debe utilizar una secuencia de escape Unicode para dichos caracteres, que se basa en el valor hexadecimal del punto de código de un carácter. Entonces 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 personajes siguen, hay dos formas de evitar interpretaciones erróneas:

a) (mencionado por otros) Utilice 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 de delimitación será ignorado, y esto se mostrará foo , donde el espacio mostrado aquí sería un carácter de NO-BREAK SPACE .

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 escribir , porque los ceros a la izquierda no son necesarios, y los dígitos no necesitan ser contados;
  • es más fácil de leer , porque hay espacio en blanco entre la secuencia de escape y el texto siguiente, y los dígitos no necesitan ser contados;
  • requiere menos espacio , porque los ceros a la izquierda no son necesarios;
  • es compatible hacia arriba , porque los puntos de código de soporte Unicode más allá de U + 10FFFF en el futuro requerirían 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 estilo:

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

- o hazlo explícito:

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

Ver CSS 2.1, sección "4.1.3 Caracteres y mayúsculas y minúsculas" para más detalles.

Question

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

Usando algo como esto solo imprime   a la pantalla en lugar del espacio sin interrupción:

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



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

Encontré que la forma más fácil de convertir un símbolo a su equivalente hexadecimal es, como desde ▾ ( ▾ ) a \25BE es usar la calculadora de Microsoft =)

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




Hay una manera de pegar un nbsp : abrir CharMap y copiar el personaje 160 . Sin embargo, en este caso, probablemente lo espacie con relleno, así:

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

Sin embargo, es posible que deba establecer la display:inline-block las migas de pan display:inline-block o algo así.




Sé que esta es una publicación bastante antigua, pero si el espaciado es todo lo que buscas, ¿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 mi prueba.




Related