如何在 CSS 中创建文本列：纯 CSS 还是 JavaScript？

使用 CSS Overflow 创建文本列

在 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 中的段落，将它们分成两个数组，并浮动段落的后半部分以创建两列布局。

以上是如何在 CSS 中创建文本列：纯 CSS 还是 JavaScript？的详细内容。更多信息请关注PHP中文网其他相关文章！