如何僅使用 CSS 建立多列文字溢出？

Creating Multi-Column Text Overflow with CSS

In web development, it's common to encounter the need to display text in multiple columns. This arrangement, reminiscent of newspaper layouts, helps improve readability and saves space.

Using CSS for Multi-Column Text Overflow

Fortunately, you can achieve this multi-column effect using CSS alone, without resorting to multiple divs. The following code snippet demonstrates how:

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

In this code:

• column-count sets the number of columns desired. In this example, it's set to 3.
• column-gap defines the spacing between columns. Here, a 10px gap is specified.
• column-rule adds a border between columns. In this case, it's a 1px black border.

Apply the multi class to any div where you want the multi-column effect. For instance:

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

This CSS-only solution allows you to display text in multiple columns dynamically, adjusting to different screen sizes or browser window widths.

以上是如何僅使用 CSS 建立多列文字溢出？的詳細內容。更多資訊請關注PHP中文網其他相關文章！