如何在 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中文網其他相關文章！