Pregunta Agregar entidades HTML usando contenido CSS


Cómo usas el CSS content propiedad para agregar entidades html?

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

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

877
2017-10-10 07:19


origen


Respuestas:


Tienes que usar el unicode escapado:

Me gusta

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

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


942
2017-10-10 07:27



CSS no es HTML   es un nombre referencia de personaje en HTML; equivalente a la referencia de caracteres numéricos decimales  . 160 es el decimal punto de código del NO-BREAK SPACE personaje en Unicode (o UCS-2; ver el Especificación HTML 4.01) La representación hexadecimal de ese punto de código es U + 00A0 (160 = 10 × 161 + 0 × 160) Lo encontrarás en el Unicode Gráficos de código y Base de datos.

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 (p. ej., espacio) después de la secuencia de escape:

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

(Ya que f es un dígito hexadecimal, \a0f significaría lo contrario 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 mostrado aquí sería un NO-BREAK SPACE personaje.

El enfoque del 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 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;
  • eso requiere menos espacio, porque los ceros a la izquierda no son necesarios;
  • es compatible hacia arriba, debido a que 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 de 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 Personajes y caso" para detalles.


144
2017-12-21 20:18



Actualizar: PointedEars menciona que la posición correcta para   en todas las situaciones css sería
'\a0 ' lo que implica que el espacio es un terminador para la cadena hexagonal y es absorbido por la secuencia escapada. Él además señaló esto descripción autorizada que suena como una buena solución al problema que describí y solucioné a continuación.

Lo que debes hacer es usar el Unicode escapado. A pesar de lo que le han dicho \00a0no es un sustituto 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 usando \0000a0 como  . Si lo intentas, como lo sugieren mathieu y millikin:

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

Toma la B en los caracteres de hexágono escapado. Lo mismo ocurre con 0-9a-fA-F.


77
2017-09-11 19:09



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.

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

Sí. Habilite el modo de programadores, encienda el sistema decimal, ingrese 9662, luego cambia a hex y obtendrás 25BE. Entonces solo agrega una barra invertida \ Al Principio.


39
2017-12-15 16:55



Usa el código hexadecimal para un espacio sin interrupciones. Algo como esto:

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

31
2017-10-10 07:24



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

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

Es posible que deba establecer las migas de pan display:inline-block o algo, sin embargo.


16
2017-12-05 08:16



Por ejemplo :

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

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

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

Resultado: ↬

Eso es :)


8
2018-05-07 15:35