如何使用 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中文網其他相關文章！