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

Question

Comment utiliser le CSS content propriété pour ajouter des entités html?

J'ai un certain nombre de liens que j'ai faites dans un style fil d'ariane de la liste en ajoutant une flèche à l'avant de chaque.

<div class="breadcrumbs">
    <a>One</a>
    <a>Two</a>
    <a>Three</a>
</div>

Qui a le style suivant:

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

Le problème est que lorsque le fil d'ariane de la liste devient longue et renvoyé à la ligne suivante, la flèche est à gauche sur la ligne précédente. La solution la plus évidente consiste à modifier l'espace en un espace insécable, mais cela ne fonctionne pas:

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

Il fait des sorties   sur l'écran. J'ai autour de cela avec d'autres personnages étranges ( » ) en le copiant le caractère directement, mais comment voulez-vous coller un   ?

Answer 1

Vous devez utiliser la séquence d’échappement unicode :

Comme

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

Answer 2

CSS n'est pas HTML.   est un personnage de l'entité de référence en HTML; un stand-in pour le personnage de référence  . 160 est la virgule le point de code de l' NO-BREAK SPACE de caractères en Unicode ( UCS-2; voir la Spécification HTML 4.01). La représentation hexadécimale de ce point de code U+00A0 (160 = 10 × 16¹ + 0 × 16⁰). Vous trouverez dans l'Unicode Code des Graphiques et des Caractères de la Base de données.

En CSS, vous devez utiliser une séquence d'échappement Unicode pour les caractères, qui est basé sur la valeur hexadécimale du code d'un caractère. Si vous avez besoin d'écrire

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

Cela fonctionne tant que la séquence d'échappement vient en dernière position dans une chaîne de valeur. Si les personnages à suivre, il y a deux façons d'éviter les problèmes d'interprétation:

1. (mentionné par d'autres) Utilisent exactement six chiffres hexadécimaux pour la séquence d'échappement:

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

2. Ajouter un blanc-espace de e. g., de l'espace) après la séquence d'échappement:

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

   (Depuis f est un chiffre hexadécimal, \a0f seraient autrement moyenne GURMUKHI LETTER EE d'ici, ou ਏ si vous avez une police adaptée.)

   La délimitation de l'espace vide sera ignorée, et ce sera affichée > foo, d'où l'affichage de l'espace serait ici une NO-BREAK SPACE de caractère.

Le white-space approche ('\a0 foo') a les avantages suivants par rapport à six chiffres approche ('\0000a0foo'):

• il est plus facile de taper, parce que les zéros ne sont pas nécessaires, et les chiffres ne doivent pas être pris en compte;
• 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 pris en compte;
• il nécessite moins d'espace, parce que les zéros ne sont pas nécessaires;
• il est en haut-compatible, car Unicode code de prise en charge au-delà de U+10FFFF dans l'avenir qui nécessiterait une modification de la Spécification CSS.

Ainsi, pour afficher un espace après un caractère d'échappement, l'utilisation de deux espaces dans la feuille de style –

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

– ou de le rendre explicite:

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

Voir CSS 2.1, section "4.1.3 des Personnages et des cas" pour plus de détails.

Answer 3

Mise à jour: PointedEars mentionne que la bonne stand de pour la   dans tous les css situations
'\a0 ' ce qui implique que l'espace est un indicateur de fin de la chaîne hexadécimale et est absorbé par les échappé à la séquence. Il a en outre souligné cette description faisant autorité qui sonne comme une bonne solution pour le problème que j'ai décrit et fixe ci-dessous.

Ce que vous devez faire est d'utiliser l'échappé de l'unicode. En dépit de ce que vous avez dit \00a0 n'est pas un parfait substitut à d'   dans les CSS; essayez donc:

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

Plus précisément à l'aide de \0000a0 comme  . Si vous essayez, comme suggéré par mathieu et millikin:

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

Il prend le B dans l'hexagone des caractères d'échappement. La même chose se produit avec 0-9a-fA-F.

Answer 4

J’ai trouvé le moyen d’easyest pour convertir les symboles de « ▾ » à « \25BE » utilisent la calculatrice microsoft =) Oui, activer le mode de programmeurs, tourner sur le système décimal, tapez '9662', puis interrupteur au sortilège et vous obtiendrez « 25BE ». Il suffit d’ajouter slash ' \'.

Answer 5

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