跳至內容
Astera Technology

文章分欄仍是一篇文章,別當成獨立方格

一段文章流過兩欄,DOM 仍是一段;用文字片段位置核對,不把它當成兩格資料。

一段文字分流至兩個 120px 欄帶。

下載完整個案資料及參考答案 ↓

先看這個例子

文章闊 260px,兩欄中間 20px,每欄有 120px。文字行流入兩個欄帶,原段落仍是一個 DOM 節點。

輸入與瀏覽器原生結果
情況輸入或查看方法結果與意思
DOM數文章段落一個 p
欄位位置(260−20)/2每欄 120px
呈現片段查看文字 Range 矩形文字行片段在兩個 x 欄帶出現
下載可編輯 CSV ↓

瀏覽器怎樣處理

多欄配置把連續內容分流;grid 則把子元素放進格內,不會自動把一段文章拆到兩格。欄位平衡和字款量度影響實際行數,驗證須逐引擎記錄。

兩欄 grid 仍把段落留在一格

反例把同一段文章和一個空格放進兩欄 grid。

反例原始碼,請另開例子核對
<style>body{margin:8px}</style>
<style>.article{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:260px;font:16px/20px monospace;overflow-wrap:anywhere}.article p{margin:0}</style><section class="article"><p>筆記是一篇連續文章。先儲存本地檔案,再開瀏覽器,查看文件結構,然後比較版面計算結果。核對畫面時,保留原文作對照,不把下一欄當成另一份資料。</p><section></section></section>

文章行只在第一個 120px 格內,第二格仍空。

試着修正

CSS 分成兩欄,是否要求原始碼有兩個段落?

查看參考答案

不需要。一段文章可跨欄分流,DOM 仍保留單一閱讀次序。

  • DOM 節點數和真正行片段 x 座標一起比。
  • 不承諾不同字款和引擎換行完全相同。

原始例子檔案

相關資源