先看這個例子
文章闊 260px,兩欄中間 20px,每欄有 120px。文字行流入兩個欄帶,原段落仍是一個 DOM 節點。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| DOM | 數文章段落 | 一個 p |
| 欄位位置 | (260−20)/2 | 每欄 120px |
| 呈現片段 | 查看文字 Range 矩形 | 文字行片段在兩個 x 欄帶出現 |
瀏覽器怎樣處理
多欄配置把連續內容分流;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 座標一起比。
- 不承諾不同字款和引擎換行完全相同。