Comment aligner le texte à droite avec un espacement uniforme des points à l'aide de Simple CSS ?

Justifier le texte avec des points en CSS

Question : Comment puis-je aligner le texte à droite avec un espacement uniforme des points en utilisant du CSS simple, comme indiqué dans cet exemple ?

Drug 1 ............  10ml
Another drug ......  50ml
Third ............. 100ml

Réponse : Pour parvenir à cette justification, une technique utilisant le pseudo-élément :after est couramment employée :

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>

Limitations :

• Versions IE inférieures à 8 ne sont pas pris en charge.
• Le contenu ne peut pas inclure d'entités HTML, ce qui limite l'utilisation de caractères spéciaux comme ·. Cependant, les caractères UTF-8 peuvent répondre à la plupart des besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!