Aggiunta di entità HTML mediante contenuto CSS


1013

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

Usando qualcosa di simile si stampa  sullo schermo anziché nello spazio non-break:

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

5
In un altro senso, l'aggiunta di contenuti tramite CSS viola la separazione delle preoccupazioni, CSS è inteso solo per le definizioni di stile. È preferibile evitare dal punto di vista dell'accessibilità, poiché la disabilitazione dei CSS rovina l'intero mark up. Tuttavia, è bello aggiungere immagini usando questa tecnica.
questzen,

95
Dipende. In questo caso è a scopo di presentazione. "Violare" il SoC per inserire ">" nel
codice

2
Solo una domanda, pensi che sarebbe meglio come un elenco ordinato? Voglio dire, è un elenco con un ordine, no?
alex

3
@questzen - Penso che sia perfettamente accettabile (e una buona forma) usare i CSS :afterper impostare, ad esempio, l'indicatore di ordinamento asc / desc su una colonna ordinata.
Josh M.,

9
Ho notato che la gente è impazzita per il principio SoC. Cieli, che tipo di contenuto è un segno ">" per te ?! Avere pietà! è solo un'icona in questo contesto, un widget, un proiettile, lo chiami. Per me il contenuto è qualcosa che vorrei essere ricercabile.
user776686

Risposte:


1063

Devi usare l'unicode con escape:

Piace

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

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


57
Gli zeri iniziali sono superflui, vedi CSS 2.1: 4.3.7 Stringhe . '>\a0'basta.
Pointed Ears

18
@dlamblin Inoltre, per evitare che i caratteri vengano interpretati in modo affidabile come parte della sequenza di escape , aggiungere uno spazio bianco standard: '>\a0 bc'viene visualizzato > bc.
Pointed Ears

18
Il mio strumento amp-what.com/#q=%3E fornisce una modalità "CSS". Scegli "css" nella parte inferiore della pagina. Per riferimento CSS sopra, questi devono essere delimitati da spazi quando sono ambigui.
ndp,

@mathieu Puoi invece usare 'content' per aggiungere un'immagine? Mi chiedo
weia design l'

1
@Adam, no, se vuoi aggiungere un'immagine, usa "background-image" e visualizza: inline-block; e larghezza: 123px; altezza: 123px; (usa larghezza / altezza esatte)
Nathan JB

177

CSS non è HTML.  è un riferimento di carattere denominato in HTML; equivalente al riferimento al carattere numerico decimale  . 160 è il punto decimale del NO-BREAK SPACEcarattere in Unicode (o UCS-2 ; vedi la specifica HTML 4.01 ). La rappresentazione esadecimale di quel punto di codice è U + 00A0 (160 = 10 × 16 1 + 0 × 16 0 ). Lo troverai nel database dei codici Unicode e 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 finché 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) Aggiungere un carattere spazio (ad es. spazio) dopo la sequenza di escape:

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

(Dato che fè una cifra esadecimale, \a0fsignificherebbe altrimenti GURMUKHI LETTER EEqui, o ਏ se si dispone di un carattere adatto.)

Lo spazio bianco delimitante verrà ignorato e questo verrà visualizzato  foo, in cui lo spazio visualizzato qui sarebbe un NO-BREAK SPACEcarattere.

L'approccio con spazi bianchi ( '\a0 foo') presenta i seguenti vantaggi rispetto all'approccio a sei cifre ( '\0000a0foo'):

  • è più facile da scrivere , poiché gli zeri iniziali non sono necessari e non è necessario contare le cifre;
  • è più facile da leggere , perché c'è uno spazio bianco tra la sequenza di escape e il testo seguente e non è necessario contare le cifre;
  • esso richiede meno spazio , perché zeri iniziali non sono necessari;
  • è compatibile con le versioni successive , poiché Unicode che supporta punti di codice oltre U + 10FFFF in futuro richiederebbe una modifica delle specifiche 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.


+1 per il trucco "per visualizzare uno spazio dopo un carattere di escape", ma devo dire che l'aggiunta di un nbsp e quindi un tipo di spazio sconfigge lo scopo del nbsp;)
TWiStErRob,

@TWiStErRob No, una combinazione di un carattere di spazio non interrotto seguito da un carattere di spazio di rottura (o viceversa) visualizzerà uno spazio sulla larghezza di due caratteri di spazio, mentre due o più caratteri di spazio testuali visualizzeranno solo uno spazio di la larghezza di un carattere di spazio come parser del motore di layout comprime spazi bianchi di interruzione consecutivi (inclusa la nuova riga) in un carattere di spazio a meno che la white-spaceproprietà CSS non dichiari diversamente.
Orecchie appuntite

sì, conosco il collasso, ma il punto di nbsp è che non si interrompe, i caratteri di parola sono anche non spezzanti per impostazione predefinita, quindi l'aggiunta di uno spazio di interruzione accanto a uno non di rottura non ha senso, il risultato finale sarà rompersi. Sto parlando per white-space: normal.
TWiStErRob,

@TWiStErRob Per favore leggi la mia risposta più attentamente. È un esempio di "visualizzazione [ing] di uno spazio dopo un carattere di escape". Il codice originale aveva un NO-BREAK SPACEcarattere, quindi per questo ho usato la sequenza di escape. Puoi scegliere qualsiasi altra sequenza di escape; se necessario, puoi anche dichiarare white-space: nowrap.
Orecchie appuntite

81

Aggiornamento : PointedEars menziona che il corretto sostituto  in tutte le situazioni CSS
'\a0 'significherebbe che lo spazio è un terminatore della 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 \00a0non è un perfetto sostituto  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 \0000a0come  . 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.


6
Hai solo bisogno di mettere uno spazio dopo la sequenza di escape, come specificato: '\a0 Break'. non'\0000a0Break' è affidabile.
Pointed Ears

@PointedEars Interessante, quindi questo spazio è un terminatore e non viene incluso nella stringa?
dlamblin,

2
Vedi CSS 2.1, sezione "4.1.3 Caratteri e caso" . Ciò dimostra anche che il tuo approccio DOVREBBE essere affidabile secondo CSS 2.1. Ma trovo l'approccio agli spazi bianchi più pulito (compatibile con gli altri) e con un ingombro minore.
Orecchie appuntite

47

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

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

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


4
Sebbene sia totalmente utile, in realtà non risponde alla domanda, quindi sarebbe meglio come commento alla domanda.
dlamblin,

1
Piccola freccia nera che punta a destra (▸ \25B8 ▸ ▸) ftw. Inoltre, vedi en.wikipedia.org/wiki/Geometric_Shapes per ulteriori informazioni.
Joel Purra,

Joel Purra, leggi Wiki più volte. hai scambiato i simboli.
netgoblin,

@netgoblin: come si fa? Mi piace solo la piccola freccia nera che punta a destra.
Joel Purra,

1
Uso questo graphemica.com dove puoi ottenere i decimali, gli esadecimali e così via
Mike,

34

Utilizzare il codice esadecimale per uno spazio non interrotto. Qualcosa come questo:

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

17

C'è un modo per incollare una nbsp- CharMap aperta e copiare il 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-blocko qualcosa del genere, però.


4
Invece di incollare l'nbsp, mi limiterei a usare un'entità, in modo che sia chiaro ai futuri manutentori che è diverso da uno spazio.
Nickf

2
d'altra parte, non fai il pangrattato come dovrebbero essere, cioè: il simbolo> dovrebbe essere in linea con il pangrattato, e non solo con uno stile visivo. almeno se vuoi che Google veda il tuo pangrattato ed elencalo sotto la tua scheda nel motore di ricerca.
Demenza

10

Per esempio :

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

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

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

Risultato: ↬

Questo è tutto :)


ho usato il contenuto: '\ 10095'; . Ma l'output non sta mostrando. invece dell'icona, mostra il rettangolo.
Kapil,

0

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 adatta perfettamente ad altre linee con ">" al suo fianco nei miei test.


-2

Ecco due modi:

  • In HTML:

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

Ciò si tradurrà in ⛱

  • In Css:

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

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

Ciò si traduce anche in ⛱


La risposta corretta è .ics :: before {content: '\ 9969';}
Marco Scarnatto
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.