CSS Justifica el texto, llena el espacio con puntos

Posible duplicado:
Rellene los espacios disponibles entre tags con puntos o guiones

¿Alguna forma de formatear texto como este con CSS simple? Tengo una base de datos de diferentes productos con sus medicamentos y dosis, y quiero mostrarlos de manera uniforme, pero sin fonts monoespaciadas.

Drug 1 ............ 10ml Another drug ...... 50ml Third ............. 100ml 

Aquí hay uno elegante y discreto con algunas limitaciones (ver más abajo).

JSFiddle

CSS:

 dl { width: 400px } dt { float: left; width: 300px; overflow: hidden; white-space: nowrap } dd { float: left; width: 100px; overflow: hidden } dt:after { content: " .................................................................................." } 

HTML:

 
Drug 1
10ml
Another drug
50ml
Third
100ml

limitaciones:

  • No funciona en IE <8

  • Acepta solo caracteres literales en la propiedad de content , sin entidades HTML, así que no · por ejemplo. (Esto no es un problema ya que @Radek señala, ya que los caracteres UTF-8 deberían ser capaces de servir a casi todas las necesidades aquí).

Otro método:

Demo en vivo

  
Drug 1 10mL
Another drug 50mL
Third 100mL

Restricciones similares a la solución de Pekka, y requerirían actualizar los coords de clip() si el ancho de la tabla cambiara.

Bueno, puedes usar css para formatear los divs para obtener esa estructura. Ejemplo:

 
Drug 1 Another drug Third
10ml 50ml 100ml

Luego lo formateas css:

 .prods{float: left; width: 100px} .dims{float: left; width: 35px} 

Este es solo un ejemplo muy simple solo para obtener esa estructura, debe agregar más detalles visuales, por supuesto.