如何使用 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: " .................................................................................." }

CSS：

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

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

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

HTML：

• 限制：

Internet Explorer 8 及更早版本不支援.僅接受🎜>僅接受content 屬性中的文字字符，不包括· 等HTML 實體。但是，UTF-8 字元應該足以滿足大多數實際場景。

以上是如何使用 CSS 在沒有等寬字體的情況下用點對齊文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！