先看這個例子
標籤佔 40px,間距佔 8px,檔名餘下可用 192px。min-width:0 容許縮窄,overflow-wrap:anywhere 則讓整個檔名換行讀完。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 檔名闊度 | 240−40−8 | 192px |
| 標籤闊度 | 查看固定 flex basis | 40px |
| 文字完整性 | 換行後讀完整檔名 | 原本全部字元仍在 |
瀏覽器怎樣處理
Flex 子項目的自動最小闊度,可能令連續長字串不能縮窄。本例用 min-width:0 移除這個下限,再讓文字在縮窄後的位置換行。兩項設定都不截短資料;標籤亦容許放大文字時換行。
自動最小闊度可能把一行撐爆
反例把檔名改回自動最小闊度及一般換行。
<style>body{margin:8px}</style>
<style>.row{display:flex;width:240px;gap:8px}.name{flex:1;overflow-wrap:normal}.tag{flex:0 0 40px}</style><section class="row"><p class="name">workshop_source_filename_without_spaces.html</p><p class="tag">HTML</p></section>所附長檔名會超出 240px 一行。把 overflow 藏起來只會遮住結尾,不是修復可讀配置。
試着修正
加 overflow:hidden,可否證明檔名全部字元已顯示?
查看參考答案
不能,它可能遮住框外內容。應核對換行、原文保留及實際 scrollWidth。
- 量度 192px、40px 及 8px 間距,不靠截圖估。
- 放大文字後也要查完整檔名。