html - tricks - unicode character css




Aggiungere entità HTML usando il contenuto CSS (6)

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

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

Potrebbe essere necessario impostare la display:inline-block del breadcrumb display:inline-block o qualcosa, comunque.

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

Usando qualcosa di simile, stampa   sullo schermo invece dello spazio non interrotto:

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

CSS non è HTML.   è un riferimento di carattere con nome in HTML; equivalente al riferimento decimale al carattere numerico   . 160 è il punto del codice decimale del carattere NO-BREAK SPACE in Unicode (o UCS-2 ; vedere la Specifica HTML 4.01 ). La rappresentazione esadecimale di quel punto di codice è U + 00A0 (160 = 10 × 16 1 + 0 × 16 0 ). Lo troverai nei grafici codici Unicode e nel database dei caratteri .

Nei 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';
}

Questo funziona fintanto che la sequenza di escape arriva per ultima in un valore stringa. Se i personaggi seguono, ci sono due modi per evitare un'interpretazione errata:

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

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

b) Aggiungi un carattere spazio bianco (ad esempio, spazio) dopo la sequenza di escape:

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

(Dato che f è una cifra esadecimale, \a0f significherebbe altrimenti GURMUKHI LETTER EE qui, o ਏ se hai un font adatto.)

Lo spazio bianco delimitante verrà ignorato e verrà visualizzato foo , dove lo spazio visualizzato qui sarà un carattere NO-BREAK SPACE .

L'approccio white-space ( '\a0 foo' ) presenta i seguenti vantaggi rispetto all'approccio a sei cifre ( '\0000a0foo' ):

  • è più facile da digitare , perché gli zeri iniziali non sono necessari e le cifre non devono essere contate;
  • è più facile da leggere , perché c'è spazio bianco tra la sequenza di escape e il testo successivo, e le cifre non devono essere contate;
  • richiede meno spazio , perché gli zeri iniziali non sono necessari;
  • è compatibile verso l'alto , perché in futuro il codice di supporto Unicode punta oltre U + 10FFFF richiederebbe una modifica della Specifica CSS.

Pertanto, per visualizzare uno spazio dopo un carattere di escape, usa due spazi nel foglio di stile -

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

- o renderlo esplicito:

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

Vedi CSS 2.1, sezione "4.1.3 Caratteri e caso" per i dettagli.


Nei CSS è necessario utilizzare una sequenza di escape Unicode al posto delle entità HTML. Questo è basato sul valore esadecimale di un personaggio.

Ho trovato che il modo più semplice per convertire il simbolo nel loro equivalente esadecimale è, ad esempio, da ▾ ( ▾ ) a \25BE è usare il calcolatore Microsoft =)

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


Per esempio :

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

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

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

Risultato: ↬

Questo è tutto :)


Usa il codice esadecimale per uno spazio senza interruzioni. Qualcosa come questo:

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

Aggiornamento : PointedEars menziona che il corretto supporto per   in tutte le situazioni di css sarebbe
'\a0 ' implica che lo spazio è un terminatore della stringa esadecimale e viene assorbito dalla sequenza di escape. Ha inoltre sottolineato questa descrizione autorevole che suona come una buona soluzione al problema che ho descritto e fissato di seguito.

Quello che devi fare è usare l'unicode con escape. Nonostante ciò che ti è stato detto \00a0 non è un perfetto supporto per   all'interno dei CSS; allora 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 usando \0000a0 come   . Se ci provi, come suggerito da Mathieu e Millikin:

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

Prende la B nei caratteri esadecimali. Lo stesso accade con 0-9a-fA-F.





css-content