CSS 对齐文本，用点填充空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5476673/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Justify text, fill space with dots
提问by Mariano
Possible Duplicate:
Fill available spaces between labels with dots or hyphens
可能的重复：
用点或连字符填充标签之间的可用空间
Any way to format text like this with simple CSS? I have a DB of different products with their drugs and doses and want to display them uniformly, but without monospaced fonts.
有什么方法可以用简单的 CSS 格式化这样的文本？我有一个包含药物和剂量的不同产品的数据库，并希望统一显示它们，但没有等宽字体。
Drug 1 ............ 10ml
Another drug ...... 50ml
Third ............. 100ml
回答by Pekka
Here's an elegant and unobtrusive one with some limitations (see below).
这是一个优雅而不引人注目的，但有一些限制（见下文）。
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:
HTML：
<dl>
<dt>Drug 1</dt>
<dd>10ml</dd>
<dt>Another drug</dt>
<dd>50ml</dd>
<dt>Third</dt>
<dd>100ml</dd>
</dl>
limitations:
限制：
Doesn't work in IE < 8
Accepts only literal characters in the
contentproperty, no HTML entities, so no·for example. (This is no problem as @Radek points out, as UTF-8 characters should be able to serve almost every need here).
不适用于 IE < 8
仅接受
content属性中的文字字符，不接受HTML 实体，因此不·接受例如。（正如@Radek 指出的那样，这没有问题，因为 UTF-8 字符在这里应该能够满足几乎所有需求）。
回答by drudge
Another method:
另一种方法：
<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>
Similar restrictions as Pekka's solution, and would require updating the clip()coords if the width of the table changed.
与 Pekka 的解决方案类似的限制，clip()如果表格的宽度发生变化，则需要更新坐标。
回答by drudge
Well, you can use css to format divs in order to get that structure. Example:
好吧，您可以使用 css 来格式化 div 以获得该结构。例子：
<div class="table">
<div class="prods">
Drug 1
Another drug
Third
</div>
<div class="dims">
10ml
50ml
100ml
</div>
</div>
Then you format it css:
然后你格式化它的css：
.prods{float: left; width: 100px}
.dims{float: left; width: 35px}
This is just a very simple example just to get that structure, you should add more visual detail of course.
这只是一个非常简单的例子，只是为了得到那个结构，当然你应该添加更多的视觉细节。
