Question

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

用简单的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中不起作用＆lt; 8
仅接受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}

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

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

3 个答案: