Al final de cada tipo de publicación en mi tema de Tumblr, tengo este código:
<p class="permalink">
<a href="{Permalink}">{NoteCountWithLabel}</a>
{block:HasTags} # filed under:
{block:Tags}
<a href="{TagURL}">{Tag}</a>
{/block:Tags}
{/block:HasTags}
</p>
(Sé que la
parte no es exactamente un acto de clase. Fue mi solución alternativa de cuatro segundos, y no es el propósito de esta pregunta, ¡así que tengan paciencia conmigo!)
En una publicación con varias etiquetas, eso produce:
Si solo agrego una coma después {Tag}
, haciéndolo <a href="{TagURL}">{Tag},</a>
, obtengo:
La última etiqueta tiene una coma extraña, y las publicaciones con una sola etiqueta también mostrarían la coma adicional bajo este método.
¿Cómo agrego la cantidad correcta de comas?
Actualización :
La respuesta de Jeremy a continuación hizo lo que quería. Pero, en un intento por ponerme elegante "cumplir con los estándares" (aunque no sé por qué alguien que usa IE8 leería mi tumblr), intenté implementar la sugerencia de w3d. Entonces ahora el CSS se ve así:
a.tag:before {
content:", ";
}
a.tag:first-child:before {
content:"";
}
El resultado es ahora:
( Nota: el salto de línea no está relacionado, lo agregué a propósito ) .
Entonces. ¿Qué salió mal?
fuente
,
es probablemente el espacio en blanco que ocurre después del</a>
en su marcado / tema. Podrías intentar eliminar esto. ¿La primera coma todavía está presente? ¿Intenta cambiarcontent:"";
acontent:"%";
solo para ver si se%
muestra? (A pesar de que ver en su comentario en mi respuesta que esto puede no tener ningún efecto ?!)Respuestas:
Tengo otra idea
Esto agregará un lapso con la clase "tagtail" después de cada etiqueta.
Luego, agregue este css:
Esto seleccionará cada ancla de etiqueta que viene después de un lapso de cola de etiqueta (por lo tanto, todos menos el primero). De esta forma, evitamos la necesidad de usar los selectores de primer hijo o último hijo .
ACTUALIZAR:
Si desea asegurarse de que las comas tengan un estilo aparte del delimitador, supongo que también podría hacer lo siguiente:
y luego peinarlo así:
Sin embargo, esto podría necesitar ajustes porque los navegadores difieren en las reglas de anulación.
fuente
{block:Tags}<span class="taghead">, </span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}
y el estilo entonces como:span.taghead { display:none; } a.tag + span.taghead { display:inline; }
. Sin embargo, esto podría necesitar ajustes porque los navegadores difieren en las reglas de anulación.tagtail
método estaba representando un espacio antes de la coma, pero este pocotaghead
me está haciendo muy feliz ahora. ¿Considera agregar su comentario nuevamente en la respuesta?Pruebe algunos trucos CSS (para que funcione en IE 8, debe especificar un <! DOCTYPE> en la parte superior del documento).
Luego, agregue el siguiente CSS:
Utiliza el pseudo-selector : after y la propiedad de contenido poco utilizada para agregar la coma después del hecho. La segunda regla anula la propiedad de contenido para la última etiqueta en la secuencia.
fuente
last-child
incluso en modo compatible con los estándares (es decir, con un DOCTYPE). Deberá utilizarlofirst-child:before
para admitir IE8 (e IE7).Siguiendo la respuesta de @ Jeremy ... Para admitir IE8 (e IE7) necesitará usar la
first-child
pseudo-clase, en lugar delast-child
. IE8 no es compatiblelast-child
, incluso en modo compatible con los estándares (es decir, con un DOCTYPE).EDITAR: Sin embargo, una pequeña advertencia con este enfoque es que probablemente tendrá que eliminar cualquier espacio en blanco adicional que aparezca después del cierre
</a>
en su marcado / tema.EDITAR: captura de pantalla de la salida del violín en Safari 5.0 en OS X:
fuente
a.tag:before { content:", ";}
ya.tag:first-child:before { content:"# tagged: ";}
, pero resulta en una fila de etiquetas que solo dice, Mareen Fischinger , New York City , Times Square
. Hm. Este comentario es confuso. Actualizaré la pregunta.Sobre la base de la
:before
sugerencia en respuestas anteriores. Si está trabajando con una lista de etiquetas, es muy posible que las coloque en una lista. Si utiliza cadali
etiqueta con una etiqueta en:before
lugar de una dentro de lali
etiqueta, cada etiqueta será el primer elemento secundario de lali
etiqueta, sin embargo, solo unali
etiqueta será el primer elemento secundario de la etiquetaul
ool
. Estoy usando una lista de descripción, ya que quería poner "Etiquetas" en lad
etiqueta t, por lo que lo mismo se aplica a lad
etiqueta d.Sin embargo, el uso de una lista de descripción tiene una complejidad adicional. La primera
dd
etiqueta nunca es el primer hijo de ladl
etiqueta, es ladt
etiqueta, por lo que debe usarlanth-child(2)
para orientarla. La desventaja de usarnth-child(2)
es que nuevamente no es compatible con IE 8, por lo que el problema vuelve a surgir.Aquí está mi solución.
También de las respuestas anteriores sugieren que usar un espacio en content (
content: ", ";
) funciona. ¿Funciona? No puedo hacer que funcione, pero "\ 00a0" lo hará.fuente