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

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

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