Comment justifier du texte avec des points en utilisant CSS sans polices à espacement fixe ?

Comment justifier un texte avec des points à l'aide de CSS

Requête

Rechercher un moyen d'afficher uniformément du texte avec des points de début, tels que :

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

sans recourir à des polices à espacement fixe.

Solution

Une solution simple mais efficace utilise CSS et un élément dl (liste de description) :

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 :

• Non pris en charge dans Internet Explorer 8 et versions antérieures .
• Accepte uniquement les caractères littéraux dans la propriété content, à l'exclusion des entités HTML comme ·. Cependant, les caractères UTF-8 devraient suffire pour la plupart des scénarios pratiques.

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!