How to Create Text Columns in CSS: CSS-Only or JavaScript?

Creating Text Columns with CSS Overflow

In web development, you may encounter a situation where you want to create columns of text, reminiscent of the layout found in newspapers. To achieve this effect without using additional HTML divs, you can leverage CSS and consider incorporating JavaScript as well.

CSS-Only Solution

Fortunately, there's a CSS-only solution that can transform your text into neat columns. By using the following CSS rules, you can specify the number of columns, the spacing between them, and define the borders:

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

JavaScript Solution

Alternatively, you can use JavaScript to dynamically create the columns. Here's a possible approach:

// 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";
});

In this scenario, JavaScript counts the paragraphs within the content div, splits them into two arrays, and floats the second half of the paragraphs to create the two-column layout.

The above is the detailed content of How to Create Text Columns in CSS: CSS-Only or JavaScript?. For more information, please follow other related articles on the PHP Chinese website!