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: ' ';
}
890
demandé sur Charlie 2008-10-10 11:19:25
la source

9 ответов

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 /

952
répondu mathieu 2018-04-23 08:15:18
la source

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.

147
répondu PointedEars 2018-04-28 20:48:32
la source

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.

78
répondu dlamblin 2012-01-04 00:48:32
la source

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.

39
répondu netgoblin 2018-02-20 23:16:37
la source

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

.breadcrumbs a:before {
    content: '>"151900920"a0';
}
31
répondu John Millikin 2008-10-10 11:24:21
la source

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.

16
répondu Dare 2011-10-09 17:18:58
la source

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 :)

8
répondu Ferhat KOÇER 2016-03-17 14:01:15
la source

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.

0
répondu Killuh-B 2017-11-04 09:36:48
la source

il y a deux façons:

  • Dans le HTML:

    <div class="ics">&#9969;</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"

-2
répondu Tarandeep Singh 2018-01-30 14:28:27
la source

Autres questions sur html css css-content html-entities