如何使用 CSS 在没有等宽字体的情况下用点对齐文本？

如何使用CSS对齐带点的文本

查询

寻求一种统一显示带前导点的文本的方法，例如：

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

不诉诸等宽字体。

解决方案

一个简单而有效的解决方案利用 CSS 和 dl（描述列表）元素：

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>

限制：

• Internet Explorer 8 及更早版本不支持.
• 仅接受 content 属性中的文字字符，不包括 · 等 HTML 实体。但是，UTF-8 字符应该足以满足大多数实际场景。

以上是如何使用 CSS 在没有等宽字体的情况下用点对齐文本？的详细内容。更多信息请关注PHP中文网其他相关文章！