React实现文本占容器80%宽度且单行的动态字号调整方案

你可以通过CSS动态字号计算结合MaterialUI的属性实现需求，无需复杂DOM测量，性能更优：

核心思路 #

• 强制文本单行显示，禁止换行
• 限制文本容器宽度为父容器的80%
• 使用clamp()函数锁定字号范围，同时根据文本长度、容器宽度动态调整字号

代码实现（精准适配文本长度） #

<Box display="flex" justifyContent="center">
  <Typography
    textAlign="center"
    noWrap // 强制文本单行
    sx={{
      width: '80%', // 固定占父容器80%宽度
      // 动态计算字号：最小3vh，最大7vh，中间根据文本长度自适应
      fontSize: `clamp(3vh, calc(80vw / ${item.name.length}), 7vh)`,
      // 针对不同断点调整字号范围（可选）
      [theme.breakpoints.down('md')]: {
        fontSize: `clamp(5.5vh, calc(80vw / ${item.name.length}), 7vh)`
      },
      [theme.breakpoints.down('sm')]: {
        fontSize: `clamp(3vh, calc(80vw / ${item.name.length}), 5.5vh)`
      }
    }}
  >
    {item.name}
  </Typography>
</Box>

补充优化（通用纯CSS方案） #

如果不想依赖文本长度计算，可利用视口宽度动态调整，让浏览器自动适配：

<Box display="flex" justifyContent="center">
  <Typography
    textAlign="center"
    noWrap
    sx={{
      width: '80%',
      maxWidth: '80%',
      // 基于视口宽度设置字号范围，确保在不同设备上都能自适应
      fontSize: 'clamp(3vh, 6vw, 7vh)',
      // 极端情况兜底：若字号无法缩小到单行，显示省略号
      overflow: 'hidden',
      textOverflow: 'ellipsis'
    }}
  >
    {item.name}
  </Typography>
</Box>

原理说明 #

• noWrap：强制文本不换行，保持单行状态
• width: 80%：固定文本容器宽度为父容器的80%
• clamp(min, preferred, max)：锁定字号的最小/最大值，浏览器会自动选择合适的字号，确保文本在容器内单行显示
• 断点适配：可根据屏幕尺寸调整字号范围，适配不同设备的显示需求

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