CSS のみを使用して複数列のテキスト オーバーフローを作成するにはどうすればよいですか?

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

Web 開発では、テキストを複数の列に表示する必要が生じることがよくあります。新聞のレイアウトを彷彿とさせるこの配置は、読みやすさの向上とスペースの節約に役立ちます。

複数列テキスト オーバーフローに CSS を使用する

幸いなことに、この複数列効果は、CSS を使用せずに CSS のみを使用して実現できます。複数の div に頼る。次のコード スニペットは、

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

このコード内:

• column-count で必要な列の数を設定します。この例では、3 に設定されています。
• column-gap は列間の間隔を定義します。ここでは 10 ピクセルのギャップが指定されています。
• column-rule は列の間に境界線を追加します。この場合、それは 1 ピクセルの黒い境界線です。

複数列効果が必要な任意の div にマルチクラスを適用します。例:

<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>

この CSS のみのソリューションを使用すると、さまざまな画面サイズやブラウザ ウィンドウの幅に合わせて、複数の列にテキストを動的に表示できます。

以上がCSS のみを使用して複数列のテキスト オーバーフローを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。