Bagaimana untuk Membuat Lajur Teks dalam CSS: CSS-Sahaja atau JavaScript?

Membuat Lajur Teks dengan CSS Overflow

Dalam pembangunan web, anda mungkin menghadapi situasi di mana anda ingin mencipta lajur teks, mengingatkan susun atur yang terdapat dalam akhbar. Untuk mencapai kesan ini tanpa menggunakan div HTML tambahan, anda boleh memanfaatkan CSS dan mempertimbangkan untuk memasukkan JavaScript juga.

Penyelesaian CSS Sahaja

Nasib baik, terdapat CSS sahaja penyelesaian yang boleh mengubah teks anda menjadi lajur yang kemas. Dengan menggunakan peraturan CSS berikut, anda boleh menentukan bilangan lajur, jarak antara lajur dan menentukan sempadan:

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

JavaScript Solution

Sebagai alternatif, anda boleh menggunakan JavaScript untuk mencipta lajur secara dinamik. Berikut ialah pendekatan yang mungkin:

// Get the content div
const content = document.querySelector(".content");

// Count the number of paragraphs
const paragraphs = content.querySelectorAll("p");

// Split the paragraphs into two equal arrays
const firstHalf = paragraphs.slice(0, Math.floor(paragraphs.length / 2));
const secondHalf = paragraphs.slice(Math.floor(paragraphs.length / 2));

// Float the second half of the paragraphs right
secondHalf.forEach((paragraph) => {
  paragraph.style.float = "right";
});

Dalam senario ini, JavaScript mengira perenggan dalam div kandungan, membahagikannya kepada dua tatasusunan dan mengapungkan separuh kedua perenggan untuk mencipta reka letak dua lajur.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Lajur Teks dalam CSS: CSS-Sahaja atau JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!