CSS/JS 實現 div 固定寬高下站點名稱自適應填充：文字縮放與換行策略

需求拆解

• 綠色區域：固定寬高（如 width: 300px; height: 120px）。
• 站點數據：數量不定、名稱長度不定。
• 目標：文字自動縮放字號、自動換行、填滿整個區域，無滾動條。

核心結論：純 CSS 無法實現「根據內容量動態計算字號以填滿固定盒子」

CSS 無「內容感知」能力，無法根據子元素總寬高反推 font-size。必須借助 JavaScript 計算。

方案一：JS 計算最佳字號（推薦）

<div id="station-board" class="board">
  <div class="station-row"><span>北京西站</span><span>北京南站</span></div>
  <div class="station-row"><span>石家莊站</span></div>
  ...
</div>

方案二：CSS viewport 单位 + 媒體查詢（近似，無 JS）

.board {
  width: 300px; height: 120px;
  font-size: calc(12px + 2vw); /* 根據視口寬度縮放，非內容感知 */
}
@media (max-width: 400px) { .board { font-size: 14px; } }

缺點：無法保證任意數據量下完美填滿，需人工調試斷點。

方案三：變換佈局思路（避開難題）

• 站點固定寬度，容器自適應寬度：.station { width: 80px; } .board { display: flex; flex-wrap: wrap; width: auto; } → 綠色區域寬度隨站點數變化，高度固定或自適應。
• 單行跑馬燈：站點過多時橫向滾動，CSS animation: marquee 20s linear infinite。
• 分頁/分屏：固定顯示 N 行，超出翻頁，JS 控制翻頁邏輯。

性能優化提示

• 使用 requestAnimationFrame 包裹 fitText，避免佈局抖動。
• 緩存 clientWidth/Height，減少重排。
• 數據量大（>100 行）時，考慮虛擬列表或 Canvas 渲染。

總結

「固定盒子 + 任意內容 + 文字自適應填滿」是典型的需 JS 參與的佈局。採用二分查找字號演算法，兼容動態數據更新、窗口縮放，體驗最佳。若業務允許，調整佈局策略（容器自適應）可完全 CSS 化，維護成本更低。