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

Mewajarkan Teks dan Mengisi Ruang dengan Titik Menggunakan CSS

Dengan keperluan untuk memaparkan data secara seragam merentas produk dan dos yang berbeza, ia menjadi penting untuk cari cara untuk memformat teks tanpa menggunakan fon monospace. Cabaran ini telah ditangani pada masa lalu, dan salah satu penyelesaian yang berpotensi melibatkan penggunaan gaya sebaris seperti

dan

untuk membuat senarai penerangan.

Dalam konteks ini,

unsur digunakan untuk mewakili nama ubat, manakala

unsur mewakili dos. Dengan menetapkan lebar tetap untuk

elemen dan menambah unsur pseudo dengan rentetan titik yang panjang (cth., "................................. ................................................." ), kita boleh mencipta kesan justifikasi yang diingini.

Berikut ialah contoh untuk menunjukkan pendekatan:

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>

Teknik ini mewajarkan teks dengan berkesan dan mengisi ruang yang tinggal dengan titik, menghasilkan paparan yang seragam dan menarik secara visual. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa penyelesaian ini mempunyai had tertentu, seperti:

• Ketidakserasian dengan versi Internet Explorer sebelum 8
• Ketidakupayaan untuk menggunakan entiti HTML dalam sifat kandungan (cth. , "·") disebabkan oleh pengehadan dalam sifat kandungan

Walaupun pengehadan ini, untuk kebanyakan tujuan praktikal, pendekatan ini menyediakan cara yang elegan dan tidak mengganggu untuk mencipta teks yang dibenarkan dan mengisi ruang dengan titik menggunakan CSS .

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!