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>

制限事項

このソリューションには次の制限があります:

• Internet Explorer 8 より古いバージョンではサポートされていません。
• Content プロパティはリテラル文字のみを受け入れ、· などの HTML エンティティは受け入れません。ただし、UTF-8 文字は、このコンテキストにおける幅広いニーズをカバーします。

以上がCSS を使用してテキストを両端揃えし、空のスペースをドットで埋める方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。