如何实现Slate中Gantt Chart小进度条内标签1的动态适配显示？

下面提供纯CSS和CSS+JS两种实现方案，解决进度条区域较小时标签无法完整显示的问题：

纯CSS方案（依赖容器查询） #

利用CSS容器查询和动态字体单位，让标签字体随进度条宽度自动缩放：

HTML结构 #

<div class="gantt-container">
  <!-- 窄进度条示例 -->
  <div class="gantt-bar">
    <div class="gantt-progress" style="width: 15%">
      <span class="gantt-label">标签1</span>
    </div>
  </div>
  <!-- 宽进度条示例 -->
  <div class="gantt-bar">
    <div class="gantt-progress" style="width: 60%">
      <span class="gantt-label">完整标签内容示例</span>
    </div>
  </div>
</div>

CSS样式 #

.gantt-bar {
  width: 100%;
  height: 32px;
  background-color: #e0e0e0;
  margin: 8px 0;
  border-radius: 4px;
  overflow: hidden;
}

.gantt-progress {
  height: 100%;
  background-color: #2196F3;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 启用容器查询，以进度条宽度为参考 */
  container-type: inline-size;
}

.gantt-label {
  white-space: nowrap;
  color: #fff;
  font-weight: 500;
  /* 基于进度条宽度动态调整字体大小：最小0.6rem，最大1rem，中间按容器宽度比例缩放 */
  font-size: clamp(0.6rem, 7cqi, 1rem);
  padding: 0 4px;
}

CSS+JS兼容方案（适配旧浏览器） #

通过JS计算标签与进度条的宽度比例，动态缩放标签尺寸：

HTML结构 #

和纯CSS方案一致，无需修改

补充CSS样式 #

在原有CSS基础上添加：

.gantt-label {
  /* 初始缩放为1，transform-origin确保缩放时居中 */
  transform: scale(1);
  transform-origin: center;
  transition: transform 0.2s ease;
}

JS代码 #

function resizeGanttLabels() {
  document.querySelectorAll('.gantt-progress').forEach(progressBar => {
    const label = progressBar.querySelector('.gantt-label');
    if (!label) return;

    const barWidth = progressBar.offsetWidth;
    const labelWidth = label.offsetWidth;

    // 当标签宽度超过进度条时，计算缩放比例
    if (labelWidth > barWidth) {
      const scaleRatio = barWidth / labelWidth;
      label.style.transform = `scale(${scaleRatio})`;
    } else {
      label.style.transform = 'scale(1)';
    }
  });
}

// 页面加载完成后初始化
window.addEventListener('load', resizeGanttLabels);
// 窗口大小变化时重新调整
window.addEventListener('resize', resizeGanttLabels);

两种方案都能实现标签随进度条宽度动态适配，纯CSS方案更简洁，JS方案兼容性更好，可根据项目环境选择。

内容的提问来源于stack exchange，提问作者Asher