先看這個例子
第二欄用 minmax(0,1fr)。兩段文字均可按需要換行,長檔名保留完整,不以裁字避開問題。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 標籤欄 | 讀第一欄闊度 | 80px |
| 內容欄 | 260−80−10 | 170px |
| 長字串 | 核對原文及溢出 | 全文在所屬欄內換行 |
瀏覽器怎樣處理
單用 1fr 的欄位有自動最小值,會受內容固有尺寸影響。minmax(0,1fr) 明確把下限設為零,文字則另靠換行處理。本課量度欄位尺寸,不是發票關聯或存貨版面選擇。
單用 1fr,可能沿用過大的最小闊度
反例改回 1fr,也取消緊急換行。
<style>body{margin:8px}</style>
<style>.grid{display:grid;width:260px;grid-template-columns:80px 1fr;gap:10px}.grid p{margin:0;overflow-wrap:normal}</style><section class="grid"><p>檔案名稱</p><p>very_long_workshop_source_file_without_spaces.html</p></section>連續檔名令第二欄大於原本分配,超出 260px grid。
試着修正
只把欄位最小值設成零,就保證長字串能在窄欄讀完嗎?
查看參考答案
不能。它只容許欄位縮窄,文字仍須有合適換行或其他明確呈現規則。
- 讀取欄位計算值,也量度真正子元素。
- 尺寸和原文保留兩邊都要核對。