跳至內容
Astera Technology

Flex 文字撐爆一行,怎樣縮而不裁字?

240px 一行內要放長檔名和固定闊度標籤;縮內容位置,也要保留全部文字。

檔名用 192px 換行,不裁字;標籤保留 40px。

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

先看這個例子

標籤佔 40px,間距佔 8px,檔名餘下可用 192px。min-width:0 容許縮窄,overflow-wrap:anywhere 則讓整個檔名換行讀完。

輸入與瀏覽器原生結果
情況輸入或查看方法結果與意思
檔名闊度240−40−8192px
標籤闊度查看固定 flex basis40px
文字完整性換行後讀完整檔名原本全部字元仍在
下載可編輯 CSV ↓

瀏覽器怎樣處理

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 間距,不靠截圖估。
  • 放大文字後也要查完整檔名。

原始例子檔案

相關資源