CSS对齐文本，用点填充空间

Question

有什么办法可以通过简单的CSS设置文本格式？我有一个包含不同产品及其药物和剂量的数据库，希望统一显示它们，但没有等宽字体。

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

Answer 1

这是一款优雅且不失礼貌的产品，但有一些限制（请参阅下文）。

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字符几乎可以满足这里的所有需求）。