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

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

Avec la nécessité d'afficher les données de manière uniforme pour différents produits et doses, il devient essentiel de trouvez un moyen de formater le texte sans utiliser de polices à espacement fixe. Ce défi a été relevé dans le passé et l'une des solutions potentielles consiste à utiliser des styles en ligne tels que

et pour créer une liste de descriptions.

Dans ce contexte, le

est utilisé pour représenter le nom du médicament, tandis que l'élément

L'élément représente la dose. En définissant une largeur fixe pour le champ

élément et en ajoutant un pseudo-élément avec une longue chaîne de points (par exemple, "............................... ......................................................." ), nous pouvons créer l'effet de justification souhaité.

Voici un exemple pour démontrer l'approche :

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>

Cette technique justifie efficacement le texte et remplit l'espace restant avec des points, créant ainsi un affichage uniforme et visuellement attrayant. Cependant, il est important de noter que cette solution présente certaines limitations, telles que :

• Incompatibilité avec les versions d'Internet Explorer antérieures à 8
• Impossibilité d'utiliser des entités HTML au sein de la propriété content (ex. , "·") en raison des limitations de la propriété content

Malgré ces limitations, pour la plupart des objectifs pratiques, cette approche fournit un moyen élégant et discret de créer du texte justifié et de remplir l'espace avec des points à l'aide de CSS .

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!