Bagaimana Mewajarkan Teks dan Mengisi Ruang Kosong dengan Titik Menggunakan CSS?

Mewajarkan Teks dan Mengisi Ruang dengan Titik Menggunakan CSS

Soalan ini membincangkan keperluan untuk menjajarkan teks secara seragam dan mengisi ruang yang tinggal dengan titik, khusus untuk memaparkan maklumat produk dengan ubat dan dos.

Penyelesaian CSS

Untuk mencapai pemformatan ini dengan CSS, penyelesaian yang elegan dan disokong sebahagiannya disediakan:

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

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

Had

Penyelesaian ini mempunyai had berikut:

• Tidak disokong oleh versi Internet Explorer yang lebih lama daripada 8.
• Harta kandungan hanya menerima aksara literal, bukan entiti HTML seperti ·. Walau bagaimanapun, aksara UTF-8 merangkumi pelbagai keperluan dalam konteks ini.

Atas ialah kandungan terperinci Bagaimana Mewajarkan Teks dan Mengisi Ruang Kosong dengan Titik Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!