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()弦。

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}

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