web-dev-qa-db-fra.com

Ajout d'entités HTML à l'aide de contenu CSS

Comment utilisez-vous la propriété CSS content pour ajouter des entités html?

Utiliser quelque chose comme ceci ne fait qu'imprimer   à l'écran à la place de l'espace insécable:

.breadcrumbs a:before {
    content: ' ';
}
htmlcsshtml-entitiescss-content
948
nickf

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/

1009
mathieu

CSS n'est pas HTML.   est un nom référence de caractère en HTML; équivalent à la référence au caractère décimal numérique  . 160 est le point de code décimal du caractère NO-BREAK SPACE en nicode (ou CS-2 ; voir le Spécification HTML 4.01 ). La représentation hexadécimale de ce point de code est U + 00A0 (160 = 10 × 161 + 0 × 16). Vous le trouverez dans les codes Unicode Tableaux de code et Base de données de caractères .

En CSS, vous devez utiliser une séquence d'échappement Unicode pour ces caractères, qui est 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 y a deux façons d'éviter une mauvaise interprétation:

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

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

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

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

(Puisque f est un chiffre 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 sera affiché  foo, où l'espace affiché ici serait un caractère NO-BREAK SPACE.

L’approche en espace blanc ('\a0 foo') présente les avantages suivants par rapport à l’approche à six chiffres ('\0000a0foo'):

  • il est plus facile à taper , car les zéros de gauche ne sont pas nécessaires et les chiffres ne doivent pas être comptés;
  • il est plus facile à lire , car il y a un espace blanc entre la séquence d'échappement et le texte suivant, et les chiffres ne doivent pas être comptés;
  • il nécessite moins d’espace , car les zéros non significatifs ne sont pas nécessaires;
  • il est compatible vers le haut , car les points de code de support Unicode supérieurs à U + 10FFFF nécessiteraient à l'avenir 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 majuscules" pour plus de détails.

163
PointedEars

Mise à jour : PointedEars mentionne que le correct correctif pour   dans toutes les situations css serait
'\a0 ' impliquant que l’espace est un terminateur de la chaîne hexagonale et est absorbé par la séquence échappée. Il a en outre souligné ceci description faisant autorité , ce qui semble être une bonne solution au problème que j'ai décrit et résolu ci-dessous.

Ce que vous devez faire, c'est utiliser l'unicode échappé. Malgré ce que l'on vous a dit, \00a0 n'est pas un remplaçant idéal pour   dans 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 hexadécimaux échappés. La même chose se produit avec 0-9a-fA-F.

79
dlamblin

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 le moyen le plus simple de convertir un symbole en son équivalent hexadécimal est, par exemple de (▾) à \25BE, consiste à utiliser la calculatrice Microsoft =)

Oui. Activez le mode programmeur, allumez le système décimal, entrez 9662, puis passez en hexadécimal et vous obtiendrez 25BE. Ensuite, ajoutez simplement une barre oblique inverse \ au début.

44
netgoblin

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

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

Il existe un moyen de coller une nbsp - CharMap ouverte et copier caractère 16. Cependant, dans ce cas, j'espacerais probablement avec un rembourrage, comme ceci:

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

Vous aurez peut-être besoin de définir le fil d'Ariane display:inline-block ou quelque chose d'autre.

16
Dare

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 les valeurs)

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

Résultat:

C'est ça :)

9
Ferhat KOÇER

Je sais que c'est un très vieux billet, mais si l'espacement est votre but, pourquoi pas simplement:

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

J'ai déjà utilisé cette méthode. Il convient parfaitement aux autres lignes avec ">" à ses côtés lors de mes tests.

0
brian-welch