CSSを使用してテキストを両端揃えし、空白をドットで埋める方法

CSS を使用したテキストの位置調整とドットによるスペースの充填

さまざまな製品および用量にわたってデータを均一に表示する必要があるため、次のことが不可欠になります。等幅フォントを使用せずにテキストをフォーマットする方法を見つけてください。この課題は過去に解決されており、考えられる解決策の 1 つは、

などのインライン スタイルの使用です。そして

このコンテキストでは、

は説明リストを作成します。

要素は薬剤名を表すために使用されます。要素は線量を表します。

に固定幅を設定することで、要素を追加し、長いドット文字列を含む疑似要素を追加します (例: ".................................... …………………………」

アプローチを示す例を次に示します。

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:

    
Drug 1
    
10ml

    
Another drug
    
50ml

    
Third
    
100ml

このテクニックは、テキストを効果的に両端揃えし、残りのスペースをドットで埋めて、均一で視覚的に魅力的な表示を作成します。ただし、このソリューションには次のような制限があることに注意することが重要です。

Internet Explorer 8 より前のバージョンとの互換性
コンテンツ プロパティ内で HTML エンティティを使用できない (例: 、"·") コンテンツ プロパティの制限によるもの

これらの制限にもかかわらず、最も実用的な目的では、このアプローチは、CSS を使用して両端揃えのテキストを作成し、スペースをドットで埋めるエレガントで目立たない方法を提供します。 .
以上がCSSを使用してテキストを両端揃えし、空白をドットで埋める方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。