跳至內容
Astera Technology

Grid 的 1fr 被長字撐大,怎樣處理?

260px grid 內,標籤佔 80px、間距 10px,長字串在餘下 170px 換行。

兩欄實際闊度為 80px、170px,中間 10px。

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

先看這個例子

第二欄用 minmax(0,1fr)。兩段文字均可按需要換行,長檔名保留完整,不以裁字避開問題。

輸入與瀏覽器原生結果
情況輸入或查看方法結果與意思
標籤欄讀第一欄闊度80px
內容欄260−80−10170px
長字串核對原文及溢出全文在所屬欄內換行
下載可編輯 CSV ↓

瀏覽器怎樣處理

單用 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。

試着修正

只把欄位最小值設成零,就保證長字串能在窄欄讀完嗎?

查看參考答案

不能。它只容許欄位縮窄,文字仍須有合適換行或其他明確呈現規則。

  • 讀取欄位計算值,也量度真正子元素。
  • 尺寸和原文保留兩邊都要核對。

原始例子檔案

相關資源