Bagaimana untuk Mewajarkan Teks dengan Titik Menggunakan CSS Tanpa Fon Monospace?

Cara Mewajarkan Teks dengan Titik Menggunakan CSS

Pertanyaan

Mencari cara untuk memaparkan teks secara seragam dengan titik utama, seperti:

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

tanpa menggunakan fon monospace.

Penyelesaian

Penyelesaian yang mudah namun berkesan menggunakan CSS dan elemen dl (senarai penerangan):

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>

Penghadan:

• Tidak disokong dalam Internet Explorer 8 dan lebih awal .
• Hanya menerima aksara literal dalam sifat kandungan, tidak termasuk entiti HTML seperti ·. Walau bagaimanapun, aksara UTF-8 sepatutnya mencukupi untuk kebanyakan senario praktikal.

Atas ialah kandungan terperinci Bagaimana untuk Mewajarkan Teks dengan Titik Menggunakan CSS Tanpa Fon Monospace?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!