À la fin de chaque type de message dans mon thème Tumblr, j'ai ce code:
<p class="permalink">
<a href="{Permalink}">{NoteCountWithLabel}</a>
{block:HasTags} # filed under:
{block:Tags}
<a href="{TagURL}">{Tag}</a>
{/block:Tags}
{/block:HasTags}
</p>
(Je sais que le
bit n'est pas exactement un acte de classe. C'était ma solution de contournement de quatre secondes, et ce n'est pas le but de cette question, alors restez avec moi!)
Sur un post avec plusieurs tags, cela donne:
Si j'ajoute juste une virgule après la {Tag}
création <a href="{TagURL}">{Tag},</a>
, j'obtiens:
La dernière balise a une virgule superflue, et les publications avec une seule balise afficheraient également la virgule supplémentaire dans cette méthode.
Comment ajouter juste le bon nombre de virgules?
Mise à jour :
La réponse de Jeremy ci-dessous a fait ce que je voulais. Mais, pour essayer d' être fantaisiste "conforme aux normes" (bien que je ne sache pas pourquoi quiconque utilisant IE8 lirait mon tumblr), j'ai essayé de mettre en œuvre la suggestion de w3d. Alors maintenant, le CSS ressemble à:
a.tag:before {
content:", ";
}
a.tag:first-child:before {
content:"";
}
Le résultat est maintenant:
( nb: le saut de ligne n'est pas lié - j'ai ajouté cela exprès. )
Donc. Qu'est ce qui ne s'est pas bien passé?
la source
,
est probablement l'espace blanc qui se produit après le</a>
dans votre balisage / thème. Vous pouvez essayer de supprimer cela. La première virgule est toujours présente? Essayez de changercontent:"";
encontent:"%";
juste pour voir si%
ça se voit? (Bien que je vois dans votre commentaire sur ma réponse que cela peut ne pas avoir d'effet?!)Réponses:
J'ai une autre idée.
Cela ajoutera une étendue avec la classe "tagtail" après chaque balise.
Ensuite, ajoutez ce css:
Cela sélectionnera chaque ancre de balise qui vient après une durée de balise (donc toutes sauf la première). De cette façon, nous évitons d'avoir à utiliser les sélecteurs premier enfant ou dernier enfant .
MISE À JOUR:
Si vous voulez vous assurer que les virgules sont stylées indépendamment de l'ancre, je suppose que vous pouvez également faire:
puis le coiffer comme:
Cependant, cela peut nécessiter des ajustements, car les navigateurs diffèrent sur les règles prioritaires.
la source
{block:Tags}<span class="taghead">, </span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}
et le style alors comme:span.taghead { display:none; } a.tag + span.taghead { display:inline; }
. Cependant, cela peut nécessiter des ajustements, car les navigateurs diffèrent sur les règles prioritaires.tagtail
méthode rendait un espace avant la virgule, mais ce petittaghead
bout me rend très heureux maintenant. Pensez-vous à ajouter votre commentaire dans la réponse?Essayez quelques astuces CSS (pour le faire fonctionner dans IE 8, vous devez spécifier un <! DOCTYPE> en haut du document).
Ensuite, ajoutez le CSS suivant:
Il utilise le pseudo-sélecteur : après et la propriété de contenu peu utilisée pour ajouter la virgule après coup. La deuxième règle remplace la propriété de contenu de la dernière balise de la séquence.
la source
last-child
pseudo-classe même en mode conforme aux normes (c'est-à-dire avec un DOCTYPE). Vous devrez utiliser pour prendrefirst-child:before
en charge IE8 (et IE7).Suite à la réponse de @ Jeremy ... Pour prendre en charge IE8 (et IE7), vous devrez utiliser la
first-child
pseudo-classe plutôt quelast-child
. IE8 ne prend pas en chargelast-child
, même en mode conforme aux normes (c'est-à-dire avec un DOCTYPE).EDIT: Cependant, une légère mise en garde avec cette approche est que vous devrez probablement supprimer tout espace blanc supplémentaire qui apparaît après la fermeture
</a>
de votre balisage / thème.EDIT: Capture d'écran de la sortie du violon dans Safari 5.0 sur OS X:
la source
a.tag:before { content:", ";}
eta.tag:first-child:before { content:"# tagged: ";}
, mais il en résulte une ligne de balises qui dit simplement, Mareen Fischinger , New York City , Times Square
. Hm. Ce commentaire est déroutant. Je mettrai à jour la question.S'appuyant sur la
:before
suggestion des réponses précédentes. Si vous travaillez avec une liste de balises, il est fort possible que vous les placiez dans une liste. Si vous utilisez chaqueli
balise avec:before
plutôt que la balise a à l'intérieur de lali
balise - chaque balise sera le premier enfant de lali
balise mais une seuleli
balise sera le premier enfant de la baliseul
ouol
! J'utilise une liste de description car je voulais mettre "Tags" dans lad
balise t donc la même chose s'applique à lad
balise d.Cependant, l'utilisation d'une liste de descriptions présente une complexité supplémentaire. La première
dd
balise n'est jamais le premier enfant de ladl
balise, c'est ladt
balise, vous devez donc l'utilisernth-child(2)
pour la cibler. L'inconvénient de l'utilisationnth-child(2)
est qu'encore une fois il n'est pas conforme à IE 8, donc ce problème se reproduit.Voici ma solution.
À partir des réponses précédentes, ils suggèrent également que l'utilisation d'un espace dans content (
content: ", ";
) fonctionne. Est-ce que ça marche? Je ne peux pas le faire fonctionner mais "\ 00a0" le fera.la source