CSS でテキスト列を作成する方法: CSS のみ、それとも JavaScript?

CSS オーバーフローを使用したテキスト列の作成

Web 開発では、次のようなテキスト列を作成したい状況に遭遇することがあります。新聞に載っていたレイアウト。追加の HTML div を使用せずにこの効果を実現するには、CSS を活用し、JavaScript の組み込みも検討できます。

CSS のみのソリューション

幸いなことに、CSS のみのソリューションがあります。テキストをきちんとした列に変換できるソリューション。次の CSS ルールを使用すると、列の数、列間の間隔を指定し、境界線を定義できます。

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

JavaScript ソリューション

または、 JavaScript を使用して列を動的に作成できます。考えられるアプローチは次のとおりです。

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

このシナリオでは、JavaScript はコンテンツ div 内の段落をカウントし、それらを 2 つの配列に分割し、段落の後半をフローティングにして 2 列のレイアウトを作成します。

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