Wie kann man mithilfe von CSS Text ausrichten und leere Stellen mit Punkten füllen?

Ausrichten von Text und Füllen von Leerzeichen mit Punkten mithilfe von CSS

Diese Frage erörtert die Notwendigkeit, Text gleichmäßig auszurichten und den verbleibenden Raum mit Punkten zu füllen. speziell für die Anzeige von Produktinformationen mit Medikamenten und Dosierungen.

CSS-Lösung

Um diese Formatierung mit CSS zu erreichen, wird eine elegante und teilweise unterstützte Lösung bereitgestellt:

<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>

HTML-Implementierung

<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>

Einschränkungen

Diese Lösung weist die folgenden Einschränkungen auf:

• Wird von Internet Explorer-Versionen vor 8 nicht unterstützt.
• Content-Eigenschaft akzeptiert nur Literalzeichen, keine HTML-Entitäten wie ·. Allerdings decken UTF-8-Zeichen in diesem Zusammenhang ein breites Spektrum an Anforderungen ab.

Das obige ist der detaillierte Inhalt vonWie kann man mithilfe von CSS Text ausrichten und leere Stellen mit Punkten füllen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!