CSS对齐文本，用点填充空间[重复]

Question

可能重复：
Fill available spaces between labels with dots or hyphens

有没有办法用简单的 CSS 来格式化这样的文本？我有一个包含不同药物和剂量的不同产品的数据库，并希望统一显示它们，但没有等宽字体。

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

Answer 1

这是一个优雅且不引人注目的，但有一些限制（见下文）。

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>

限制：

• 在 IE 中不起作用

• 仅接受 content 属性中的文字字符，不接受 HTML 实体，例如不接受 ·。 （正如@Radek 指出的那样，这没有问题，因为 UTF-8 字符应该能够满足这里几乎所有的需求）。

Answer 2

另一种方法：

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>

与 Pekka 的解决方案类似的限制，如果表格的宽度发生变化，则需要更新 clip() 坐标。

Answer 3

好吧，您可以使用 css 格式化 div 以获得该结构。示例：

<div class="table">
<div class="prods">
Drug 1
Another drug
Third
</div>
<div class="dims">
10ml
50ml
100ml
</div>
</div>

然后你把它格式化成css：

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

这只是一个非常简单的例子，只是为了得到这个结构，当然你应该添加更多的视觉细节。