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:
- Drug 1
- 10ml
- Another drug
- 50ml
- Third
- 100ml
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).
