Ajouter des entités HTML en utilisant du contenu CSS
comment utiliser la propriété CSS content pour ajouter des entités html?
en utilisant quelque chose comme ceci imprime juste à l'écran au lieu de l'espace de non-rupture:
.breadcrumbs a:before {
content: ' ';
}
9 réponses
vous devez utiliser l'unicode échappé:
Comme
.breadcrumbs a:before {
content: '"151900920"00a0';
}
plus d'informations sur: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order /
CSS n'est pas HTML. est un référence de caractère en HTML; équivalent à la référence de caractère décimal   . 160 est le point de code décimal 1519190920 "du caractère NO-BREAK SPACE dans Unicode (ou UCS-2 ; voir la spécification HTML 4.01 ). La représentation hexadécimale de ce point de code est U+00A0 (160 = 10 × 16 1 + 0 × 16 0 ). Vous trouverez cela dans L'Unicode charts de Code et la base de données de caractères .
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. Vous devez donc écrire
.breadcrumbs a:before {
content: '\a0';
}
cela fonctionne aussi longtemps que la séquence d'évasion vient en dernier dans une chaîne valeur. Si les caractères suivent, il y a deux façons d'éviter une mauvaise interprétation:
) (mentionné par d'autres) Utilisent exactement six chiffres hexadécimaux pour la séquence d'échappement:
.breadcrumbs a:before {
content: '"151910920"00a0foo';
}
B) Ajouter un espace blanc (E. G., espace) après la séquence d'évasion:
.breadcrumbs a:before {
content: '\a0 foo';
}
(puisque f est un chiffre hexadécimal, \a0f signifierait autrement GURMUKHI LETTER EE ici, ou "perip" si vous avez une police de caractères appropriée.)
l'espace blanc délimitant sera ignoré, et celui-ci 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 ( '"1519140920"00a0foo' ):"
- il est facile , parce que les zéros ne sont pas nécessaires, et les chiffres n'ont pas besoin d'être pris en compte; les
- c'est plus facile à lire , car il y a un espace blanc entre la séquence d'échappement et le texte suivant, et les chiffres n'ont pas besoin d'être comptés;
- il nécessite moins d'espace , parce que les zéros ne sont pas nécessaires;
- it is upwards-compatible , parce que les points de support de code Unicode au-delà de U+10FF à l'avenir nécessiterait un 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 foo';
}
voir CSS 2.1, section" 4.1.3 caractères et case " pour plus de détails.
Update : PointedEars mentionne que la position correcte pour dans toutes les situations css serait
'\a0 ' ce qui implique que l'espace est un terminateur de la chaîne hex et est absorbé par la séquence échappée. Il a en outre souligné cette description faisant autorité qui ressemble à une bonne solution au problème que j'ai décrit et corrigé ci-dessous.
ce que vous devez faire est utilisez l'unicode échappé. En dépit de ce qu'on vous a dit "151940920"a0 n'est pas un parfait stand-in pour dans CSS; donc essayer:
content:'>\a0 '; /* or */
content:'>"151900920"00a0'; /* because you'll find: */
content:'No\a0 Break'; /* and */
content:'No"151900920"00a0Break'; /* becomes No Break as opposed to below */
utilisant spécifiquement "151960920 "00a0 comme .
Si vous essayez, comme suggéré par mathieu et millikin:
content:'No"151910920"a0Break' /* 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.
dans 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 facile de convertir le symbole en leur équivalent hexadécimal est, tel que de la sorte de փ ( ▾ ) à BE est D'utiliser la calculatrice de Microsoft =)
Oui. Activez le mode programmeurs, activez le système décimal, entrez 9662 , puis passez à hex et vous obtiendrez 25BE . Puis il suffit d'ajouter un antislash \ au début.
Utiliser le code hexadécimal pour un espace insécable. Quelque chose comme ceci:
.breadcrumbs a:before {
content: '>"151900920"a0';
}
il y a une façon de coller un nbsp - Ouvrir La CharMap et copier caractère 160 . Cependant, dans ce cas, je l'espacerais probablement avec du rembourrage, comme ceci:
.breadcrumbs a:before { content: '>'; padding-right: .5em; }
vous pourriez avoir besoin de mettre la miette de pain display:inline-block ou quelque chose, cependant.
Par Exemple:
http://character-code.com/arrows-html-codes.php
exemple: si vous voulez sélectionner votre caractère , j'ai sélectionné "& # 8620" " & #x21ac "(nous utilisons HEX valeurs)
.breadcrumbs a:before {
content: '"151900920"21ac';
}
Result: chec
c'est ça :)
je sais que c'est un assez vieux poteau, mais si l'espacement est tout votre après, pourquoi pas simplement:
.breadcrumbs a::before {
content: '>';
margin-left: 8px;
margin-right: 8px;
}
j'ai déjà utilisé cette méthode. Il enveloppe parfaitement bien d'autres lignes avec ">" à ses côtés dans mon essai.
il y a deux façons:
-
Dans le HTML:
<div class="ics">⛱</div>
il en résultera ⛱
-
Dans Le Css:
.ics::before {content: "69;"}
avec code HTML <div class="ics"></div>
il en résulte aussi dans le domaine de l'éducation 151960920"