CSS でテキスト列を作成する方法: CSS のみ、それとも 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.

以上がCSS でテキスト列を作成する方法: CSS のみ、それとも JavaScript?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。