CSS Justify text, fill space with dots [duplicate] - css

Question

This question already has answers here:
Closed 11 years ago.
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).

Answer 2

Another method:
Live Demo
<style type="text/css">
table {
border: 1px solid #000;
width: 200px;
}
td span {
background-color: #FFF;
}
td.name:before {
clip: rect(0px, 190px, 20px, 0px);
content: " ............................................................ ";
position: absolute;
z-index: -1;
}
td.amt {
text-align: right;
}
</style>
<table>
<tr>
<td class="name"><span>Drug 1</span></td>
<td class="amt"><span>10mL</span></td>
</tr>
<tr>
<td class="name"><span>Another drug</span></td>
<td class="amt"><span>50mL</span></td>
</tr>
<tr>
<td class="name"><span>Third</span></td>
<td class="amt"><span>100mL</span></td>
</tr>
</table>
Similar restrictions as Pekka's solution, and would require updating the clip() coords if the width of the table changed.

Answer 3

Well, you can use css to format divs in order to get that structure. Example:
<div class="table">
<div class="prods">
Drug 1
Another drug
Third
</div>
<div class="dims">
10ml
50ml
100ml
</div>
</div>
Then you format it css:
.prods{float: left; width: 100px}
.dims{float: left; width: 35px}
This is just a very simple example just to get that structure, you should add more visual detail of course.