html-entities Agregando entidades HTML usando contenido CSS



4 Answers

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 1 + 0 × 16 0 ). 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.

html css html-entities css-content

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



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.




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í.




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.




Related