如何在CSS、Material-UI和React中实现文本不溢出？

当然可行，你只需要去掉Stack上的静态maxWidth限制，让容器自动继承父级Card的宽度即可。

修改后的代码： #

<Stack>
  <Tooltip
    title={<Typography variant="body1">{cardTitle}</Typography>}
  >
    <Typography
      variant="h3"
      sx={{
        whiteSpace: "nowrap",
        overflow: "hidden",
        textOverflow: "ellipsis",
        width: "100%"
      }}
    >
      {cardTitle}
    </Typography>
  </Tooltip>
</Stack>

关键说明： #

• 移除Stack的maxWidth: "330px"，这样Stack会默认占据父级Card的全部可用宽度，不再受固定值限制
• 保留Typography上的width: "100%"、whiteSpace: "nowrap"、overflow: "hidden"和textOverflow: "ellipsis"，这些样式会让文本在容器宽度范围内自动截断并显示省略号
• 如果你的Card带有内边距（padding），Stack作为Card的子元素会自动适配内边距后的可用空间，无需额外调整

这样标题文本就会根据Card的实际宽度自动适配，不会超出Card范围，同时Hover时通过Tooltip显示完整标题。

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