Bagaimanakah Saya Boleh Mencipta Limpahan Teks Berbilang Lajur Hanya Menggunakan CSS?

Mencipta Limpahan Teks Berbilang Lajur dengan CSS

Dalam pembangunan web, adalah perkara biasa untuk menghadapi keperluan untuk memaparkan teks dalam berbilang lajur. Susunan ini, mengingatkan susun atur akhbar, membantu meningkatkan kebolehbacaan dan menjimatkan ruang.

Menggunakan CSS untuk Limpahan Teks Berbilang Lajur

Nasib baik, anda boleh mencapai kesan berbilang lajur ini menggunakan CSS sahaja, tanpa menggunakan berbilang div. Coretan kod berikut menunjukkan cara:

div.multi {
  column-count: 3;
  column-gap: 10px;
  column-rule: 1px solid black;      
}

Dalam kod ini:

• kiraan lajur menetapkan bilangan lajur yang dikehendaki. Dalam contoh ini, ia ditetapkan kepada 3.
• jurang lajur mentakrifkan jarak antara lajur. Di sini, jurang 10px ditentukan.
• peraturan lajur menambah sempadan antara lajur. Dalam kes ini, ia ialah jidar hitam 1px.

Gunakan berbilang kelas pada mana-mana div yang anda inginkan kesan berbilang lajur. Contohnya:

<div class="multi">
  <p>Today in Wales, someone actually did something interesting.</p>
  <p>Nobody was harmed in the incident, although one elderly victim is receiving counselling.</p>
</div>

Penyelesaian CSS sahaja ini membolehkan anda memaparkan teks dalam berbilang lajur secara dinamik, melaraskan kepada saiz skrin yang berbeza atau lebar tetingkap penyemak imbas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Limpahan Teks Berbilang Lajur Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!