使用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中文網其他相關文章！
