CSS对齐文本,用点填充空格

Question

可能重复:
使用点或连字符填充标签之间的可用空格

有什么方法可以用简单的CSS格式化这样的文本吗？我有一个不同产品的DB与他们的药物和剂量,并希望统一显示它们,但没有等宽字体.

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 <8中不起作用

• 只接受content属性中的文字字符,没有HTML实体,所以没有·例如.(这是没有问题的,因为@Radek指出,因为UTF-8字符应该能够满足几乎所有需要).

Answer 2

另一种方法:

现场演示

<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()如果表格的宽度发生变化,则需要更新坐标.