CSS-动态更改字体大小以适合容器的高度

Question

我在flex容器中有一个想要保持恒定高度（10vh）的文本。随着视口越来越窄，文本（最初为单行）开始换行并溢出。

减小字体大小以确保文本始终占据vh固定部分的最佳方法是什么？我对文字换行没问题，实际上，我什至宁愿将其换成狭窄的视口。

<div id="logo">
   <img src="./img/logo.ico" />
   <p id="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>

#title{
font-size: 6vh;
}
#logo {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 10vh;
}

字体大小不能固定在vh上，因为只有在换行后才需要减小字体大小。 vw毫无意义，因为字体会随着vw的任何更改而不断调整大小