CSS Justify text, fill space with dots [duplicate]

问题:

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

回答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).

回答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.

回答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.