如何使用 CSS 对齐文本并用点填充空白？

使用CSS对齐文本并用点填充空格

这个问题讨论了统一对齐文本并用点填充剩余空间的需要，专门用于显示药物和剂量的产品信息。

CSS 解决方案

为了使用 CSS 实现这种格式，提供了一个优雅且部分受支持的解决方案：

<code class="css">dl { width: 400px }
dt { float: left; width: 300px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt:after { content: " .................................................................................." }</code>

HTML 实现

<code class="html"><dl>

    <dt>Drug 1</dt>
    <dd>10ml</dd>

    <dt>Another drug</dt>
    <dd>50ml</dd>

    <dt>Third</dt>
    <dd>100ml</dd>


</dl></code>

限制

此解决方案具有以下限制：

• 8 之前的 Internet Explorer 版本不支持。
• Content 属性仅接受文字字符，而不接受像 · 这样的 HTML 实体。然而，UTF-8 字符在这种情况下涵盖了广泛的需求。

以上是如何使用 CSS 对齐文本并用点填充空白？的详细内容。更多信息请关注PHP中文网其他相关文章！