Question Ajouter des entités HTML en utilisant du contenu CSS


Comment utilisez-vous le CSS content propriété d'ajouter des entités html?

En utilisant quelque chose comme ça, il suffit d'imprimer   à l'écran au lieu de l'espace insécable:

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

877
2017-10-10 07:19


origine


Réponses:


Vous devez utiliser l'unicode échappé:

Comme

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

Plus d'infos sur: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/


942
2017-10-10 07:27



CSS n'est pas HTML.   est un nommé référence du personnage en HTML équivalent à la référence de caractère numérique décimal  . 160 est le nombre décimal point de code du NO-BREAK SPACE personnage dans Unicode (ou UCS-2; voir le HTML 4.01 Spécifications). La représentation hexadécimale de ce point de code est U + 00A0 (160 = 10 × 161 + 0 × 160). Vous trouverez cela dans l'Unicode Graphiques de code et Base de caractères.

Dans CSS, vous devez utiliser une séquence d'échappement Unicode pour ces caractères, basée sur la valeur hexadécimale du point de code d'un caractère. Donc vous devez écrire

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

Cela fonctionne tant que la séquence d'échappement arrive en dernier dans une valeur de chaîne. Si les caractères suivent, il existe deux façons d'éviter les erreurs d'interprétation:

a) (mentionné par d'autres) Utilisez exactement six chiffres hexadécimaux pour la séquence d'échappement:

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

b) Ajouter un caractère espace blanc (par exemple, espace) après la séquence d'échappement:

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

(Depuis f est un nombre hexadécimal, \a0f signifierait autrement GURMUKHI LETTER EE ici, ou ਏ si vous avez une police appropriée.)

L'espace blanc de délimitation sera ignoré et s'affichera  foo, où l'espace affiché ici serait un NO-BREAK SPACE personnage.

L'approche des espaces blancs ('\a0 foo') présente les avantages suivants par rapport à l'approche à six chiffres ('\0000a0foo'):

  • c'est plus facile à taper, car les zéros en tête ne sont pas nécessaires et les chiffres n'ont pas besoin d'être comptés;
  • c'est plus facile à lire, parce qu'il y a un espace blanc entre la séquence d'échappement et le texte suivant, et que les chiffres n'ont pas besoin d'être comptés;
  • il nécessite moins d'espace, car les zéros en tête ne sont pas nécessaires;
  • c'est vers le haut compatible, car les points de code supportant Unicode au-delà de U + 10FFFF dans le futur nécessiteraient une modification de la spécification CSS.

Ainsi, pour afficher un espace après un caractère échappé, utilisez deux espaces dans la feuille de style -

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

- ou le rendre explicite:

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

Voir CSS 2.1, section "4.1.3 Caractères et cas" pour plus de détails.


144
2017-12-21 20:18



Mettre à jour: PointedEars mentionne que le bon support pour   dans toutes les situations CSS serait
'\a0 ' ce qui implique que l'espace est un terminateur à la chaîne hexagonale et est absorbé par la séquence échappée. Il a également souligné description autorisée ce qui ressemble à une bonne solution au problème que j'ai décrit et fixé ci-dessous.

Ce que vous devez faire est d'utiliser l'unicode échappé. Malgré ce qu'on vous a dit \00a0n'est pas un substitut parfait pour   au sein de CSS; alors essayez:

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

Spécifiquement en utilisant \0000a0 comme  . Si vous essayez, comme suggéré par mathieu et millikin:

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

Il prend le B dans les caractères hexagonaux échappés. La même chose se produit avec 0-9a-fA-F.


77
2017-09-11 19:09



En CSS, vous devez utiliser une séquence d'échappement Unicode à la place des entités HTML. Ceci est basé sur la valeur hexadécimale d'un caractère.

J'ai trouvé que la façon la plus simple de convertir un symbole en son équivalent hexadécimal est, par exemple, de ▾ (▾) à \25BE est d'utiliser la calculatrice Microsoft =)

Oui. Activer le mode programmeurs, activer le système décimal, entrer 9662, puis passez à l'hexagone et vous obtiendrez 25BE. Ensuite, ajoutez simplement une barre oblique inverse \ Au début.


39
2017-12-15 16:55



Utilisez le code hexadécimal pour un espace insécable. Quelque chose comme ça:

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

31
2017-10-10 07:24



Il y a un moyen de coller un nbsp - ouvrir CharMap et copier caractère 160. Cependant, dans ce cas, je l'espacerais probablement avec un remplissage, comme ceci:

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

Vous devrez peut-être définir la chapelure display:inline-block ou quelque chose, cependant.


16
2017-12-05 08:16



Par exemple :

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

Exemple: Si vous voulez sélectionner votre personnage, j'ai sélectionné "& # 8620" "& # x21ac" (Nous utilisons HEX valeurs)

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

Résultat: ↬

C'est tout :)


8
2018-05-07 15:35