Wie kann ich Text mit Punkten mithilfe von CSS ohne Monospace-Schriftarten ausrichten?

So richten Sie Text mithilfe von CSS mit Punkten aus

Abfrage

Suche nach einer Möglichkeit, Text mit führenden Punkten einheitlich anzuzeigen, z. B.:

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

ohne auf Monospace-Schriftarten zurückzugreifen.

Lösung

Eine einfache, aber effektive Lösung nutzt CSS und ein dl-Element (Beschreibungsliste):

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>

Einschränkungen:

• Nicht unterstützt in Internet Explorer 8 und früher .
• Akzeptiert nur Literalzeichen in der Inhaltseigenschaft, ausgenommen HTML-Entitäten wie ·. Für die meisten praktischen Szenarien sollten jedoch UTF-8-Zeichen ausreichen.

Das obige ist der detaillierte Inhalt vonWie kann ich Text mit Punkten mithilfe von CSS ohne Monospace-Schriftarten ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!