使用材质UI元素的自适应字体大小功能

作为学校的练习,我想缩小网格和排版标签中H4元素的字体大小,下面是代码:

const CompanyDetails: React.FC<Props> = (props) => {
  const { orgId, organisation, individuals, refetchOrg } = props;

  return (
    <>
      <Grid container rowSpacing={2.3}>
        <Grid item xs={12}>
          <Card sx={{ p: 2 }}>
            <CardContent>
              <Grid
                container
                item
                xs
                justifyContent="space-between"
                alignItems="center"
              >
                <Grid container item md={6}>
                  <Typography
                    variant="h4"
                    align="center"
                    textAlign="start"
                    paddingRight={6}
                  >
                    {organisation?.name}
                  </Typography>
                </Grid>

问题是,如果文本超过3行,我希望字体大小缩小到最多2行,我也会在这里附上一些截图。

const adaptiveFontSize = (text: string) => {
  if (text.length < 65) {
    return "1em";
  } else {
    return "0.9em";
  }
};

这是两条线的样子 这是三条线的样子 如果足够大的话,这就是我想要实现的目标