等幅フォントを使用せずに CSS を使用してテキストをドットで両端揃えする方法-CSSチュートリアル-php.cn

等幅フォントを使用せずに CSS を使用してテキストをドットで両端揃えする方法

Mary-Kate Olsen

リリース： 2024-10-25 02:15:02

オリジナル

989 人が閲覧しました

How to Justify Text with Dots Using CSS Without Monospaced Fonts?

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 サイトの他の関連記事を参照してください。