Aggiunta di entità HTML mediante contenuto CSS

Question

Come si utilizza la proprietà CSS content per aggiungere entità html?

L'uso di qualcosa del genere stampa semplicemente   sullo schermo anziché nello spazio non-break:

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

Answer 1

Devi usare l'unicode con escape:

Mi piace

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

Ulteriori informazioni su: http: / /www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

Answer 2

CSS non è HTML.   è un riferimento al carattere in HTML; equivalente al riferimento al carattere numerico decimale  . 160 è il punto di codice decimale del NO-BREAK SPACE carattere in Unicode (o UCS-2 ; vedi Specifica HTML 4.01 ). La rappresentazione esadecimale di quel punto di codice è U + 00A0 (160 = 10 & # 215; 16 ¹ + 0 & # 215; 16 ⁰ ). Lo troverai nell'Unicode Grafici di codice e Database dei caratteri .

In CSS è necessario utilizzare una sequenza di escape Unicode per tali caratteri, che si basa sul valore esadecimale del punto di codice di un carattere. Quindi devi scrivere

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

Funziona fino a quando la sequenza di escape arriva per ultima in un valore di stringa. Se i personaggi seguono, ci sono due modi per evitare errori di interpretazione:

a) (menzionato da altri) Utilizzare esattamente sei cifre esadecimali per la sequenza di escape:

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

b) Aggiungi un carattere di spazio bianco (ad es. spazio) dopo la sequenza di escape:

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

(Poiché f è una cifra esadecimale, \a0f significherebbe altrimenti GURMUKHI LETTER EE qui o & # 2575; se si dispone di un carattere adatto.)

Lo spazio bianco delimitante verrà ignorato e questo verrà visualizzato  foo, dove lo spazio visualizzato qui sarebbe un '\a0 foo' carattere.

L'approccio degli spazi bianchi ('\0000a0foo') presenta i seguenti vantaggi rispetto all'approccio a sei cifre (<=>):

• è più facile da scrivere , poiché gli zeri iniziali non sono necessari e non è necessario contare le cifre;
• è più facile da leggere , poiché esiste uno spazio tra la sequenza di escape e il testo seguente e non è necessario contare le cifre;
• esso richiede meno spazio , poiché non sono necessari zero iniziali;
• è compatibile con le versioni successive , poiché in futuro Unicode che supporta i punti di codice oltre U + 10FFFF richiederebbe una modifica delle specifiche CSS.

Quindi, per visualizzare uno spazio dopo un carattere di escape, usa due spazi nel foglio di stile & # 8211;

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

&

# 8211; o renderlo esplicito:

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

Vedi CSS 2.1, sezione " 4.1.3 Personaggi e case " per i dettagli.

Answer 3

Aggiorna : PointedEars menziona che la sostituzione corretta per   in tutte le situazioni CSS sarebbe
'\a0 ' implica che lo spazio è un terminatore per la stringa esadecimale ed è assorbito dalla sequenza di escape. Ha inoltre sottolineato questa descrizione autorevole che sembra una buona soluzione al problema che ho descritto e risolto di seguito.

Quello che devi fare è usare l'unicode con escape. Nonostante ciò che ti è stato detto \00a0 non è un perfetto sostituto per \0000a0 all'interno dei CSS; quindi prova:

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

Specificamente utilizzando <=> come <=>. Se ci provi, come suggerito da Mathieu e Millikin:

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

Prende la B nell'esagono sfuggito ai personaggi. Lo stesso accade con 0-9a-fA-F.

Answer 4

In CSS è necessario utilizzare una sequenza di escape Unicode al posto di Entità HTML. Questo si basa sul valore esadecimale di un personaggio.

Ho scoperto che il modo più semplice per convertire i simboli nel loro equivalente esadecimale è, ad esempio da & # 9662; (Da ▾) a \25BE è usare la calcolatrice Microsoft =)

Sì. Abilita la modalità programmatori, attiva il sistema decimale, inserisci 9662, quindi passa all'esagono e otterrai 25BE. Quindi aggiungi una barra rovesciata \ all'inizio.

Answer 5

Usa il codice esadecimale per uno spazio non interrotto. Qualcosa del genere:

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

Answer 6

C'è un modo per incollare un nbsp: aprire CharMap e copiare carattere 160 . Tuttavia, in questo caso probabilmente lo spazio con imbottitura, in questo modo:

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

Potrebbe essere necessario impostare il pangrattato display:inline-block o qualcosa del genere, tuttavia.

Answer 7

Ad esempio:

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

Esempio: se vuoi selezionare il tuo personaggio, ho selezionato " & amp; # 8620 " quot &; & amp; & # x21ac quot; (Utilizziamo i valori HEX )

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

Risultato: & # 8620;

Questo è tutto :)

Answer 8

So che questo è un post piuttosto vecchio, ma se lo spazio è tutto tuo dopo, perché non semplicemente:

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

Ho usato questo metodo prima. Si avvolge perfettamente con altre righe con & Quot; & Gt; & Quot; al suo fianco nei miei test.

Answer 9

Ecco due modi:

• In HTML:

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

Ciò si tradurrà in    & # 9969;

• In Css:

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

con codice HTML <div class="ics"></div>

Ciò comporta anche & # 9969;