html - paginas - estilos de texto css

Usar CSS para insertar texto

Question

Soy relativamente nuevo en CSS y lo he usado para cambiar el estilo y el formato del texto.

Ahora me gustaría utilizarlo para insertar texto como se muestra a continuación:

<span class="OwnerJoe">reconcile all entries</span>

Que espero que pueda mostrar como:

Tarea de Joe: conciliar todas las entradas

Es decir, simplemente en virtud de ser de la clase "Propietario Joe", quiero que se muestre el texto Joe''s Task: .

Podría hacerlo con código como:

<span class="OwnerJoe">Joe''s Task:</span> reconcile all entries.

Pero eso parece terriblemente redundante para ambos especificar la clase y el texto.

¿Es posible hacer lo que estoy buscando?

EDITAR Una idea es intentar configurarla como ListItem <li> donde la "viñeta" es el texto "Joe''s Task". Veo ejemplos de cómo configurar varios estilos de viñetas e incluso imágenes para viñetas. ¿Es posible usar un pequeño bloque de texto para la viñeta de la lista?

Answer 1

¿Esta sería la manera más simple?

$(''.OwnerJoe'').prepend("Joe''s Task: ");

Answer 2

Esto es más una cosa de plantillas que una cosa de diseño.

Templating como al aplicar una vista a un modelo de datos.

mustache pago y mustache

Answer 3

La respuesta que utiliza jQuery que parece gustar a todos tiene un defecto importante, que es que no es escalable (al menos como está escrito). Creo que Martin Hansen tiene la idea correcta, que es utilizar atributos de data-* HTML5 data-* . E incluso puedes usar el apóstrofo correctamente:

html:

<div class="task" data-task-owner="Joe">mop kitchen</div>
<div class="task" data-task-owner="Charles" data-apos="1">vacuum hallway</div>

css:

div.task:before { content: attr(data-task-owner)"''s task - " ; }
div.task[data-apos]:before { content: attr(data-task-owner)"'' task - " ; }

salida:

Joe''s task - mop kitchen
Charles'' task - vacuum hallway

Answer 4

Lo es, pero requiere un navegador con capacidad CSS2 (todos los principales navegadores, IE8 +).

.OwnerJoe:before {
  content: "Joe''s Task:";
}

Pero prefiero recomendar el uso de Javascript para esto. Con jQuery:

$(''.OwnerJoe'').each(function() {
  $(this).before($(''<span>'').text("Joe''s Task: "));
});

Answer 5

Simplemente codifícalo así:

.OwnerJoe {
  //other things here
  &:before{
    content: "Joe''s Task: ";
  }
}

Answer 6

También consulte la función attr () del atributo de contenido CSS. Emite un atributo dado del elemento como un nodo de texto. Úselo así:

<div class="Owner Joe" />

div:before {
  content: attr(class);
}

O incluso con los nuevos atributos de datos personalizados HTML5:

<div data-employeename="Owner Joe" />

div:before {
  content: attr(data-employeename);
}