等幅フォントを使用せずに 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 以前ではサポートされていません.
• コンテンツ プロパティでは、· のような HTML エンティティを除くリテラル文字のみを受け入れます。ただし、ほとんどの実用的なシナリオでは UTF-8 文字で十分です。

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