Question

Possible Duplicate:
Fill available spaces between labels with dots or hyphens

Any way to format text like this with simple CSS? I have a DB of different products with their drugs and doses and want to display them uniformly, but without monospaced fonts.

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

Answer 1

Here’s an elegant and unobtrusive one with some limitations (see below).

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:

<dl>

    <dt>Drug 1</dt>
    <dd>10ml</dd>

    <dt>Another drug</dt>
    <dd>50ml</dd>

    <dt>Third</dt>
    <dd>100ml</dd>


</dl>

limitations:

• Doesn’t work in IE < 8

• Accepts only literal characters in the content property, no HTML entities, so no · for example. (This is no problem as @Radek points out, as UTF-8 characters should be able to serve almost every need here).