Comment justifier le texte et remplir les espaces vides avec des points à l'aide de CSS ?

Justifier le texte et remplir les espaces avec des points à l'aide de CSS

Cette question traite de la nécessité d'aligner uniformément le texte et de remplir l'espace restant avec des points, spécifiquement pour afficher les informations sur les produits avec les médicaments et les doses.

Solution CSS

Pour réaliser ce formatage avec CSS, une solution élégante et partiellement prise en charge est fournie :

<code class="css">dl { width: 400px }
dt { float: left; width: 300px; overflow: hidden; white-space: nowrap }
dd { float: left; width: 100px; overflow: hidden }

dt:after { content: " .................................................................................." }</code>

Implémentation HTML

<code class="html"><dl>

    <dt>Drug 1</dt>
    <dd>10ml</dd>

    <dt>Another drug</dt>
    <dd>50ml</dd>

    <dt>Third</dt>
    <dd>100ml</dd>


</dl></code>

Limitations

Cette solution présente les limitations suivantes :

• Non pris en charge par les versions d'Internet Explorer antérieures à 8.
• La propriété Content n'accepte que les caractères littéraux, pas les entités HTML comme ·. Cependant, les caractères UTF-8 couvrent un large éventail de besoins dans ce contexte.

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!