Html 将文本限制为X行，但调整宽度以显示所有内容

我见过一些解决方案，它们使用

文本溢出：省略号
显示几行文本，如果不合适，则以“…”结尾。然而，我正在寻找一个CSS或JS解决方案，其中您将有一个固定的高度（或行数），并且容器的宽度自然地调整以显示全文内容

如果有必要，我可以制作一些图片来更好地解释我需要什么

希望有一个解决方案存在
 这将是一个粗略的形式


let quotes=[
“我不后悔我制造了一个职业敌人。任何不敢制造敌人的演员都应该退出这个行业。”，
“一个人认为说难听的话就能理解难懂的事情。”，
“说一个人是由某些化学元素组成的，这是一个令人满意的描述，仅适用于那些打算将他用作肥料的人。”，
“安全是一种死亡。”，
“最可怕的孤独是对自己感到不自在。”，
事实上，有时候穿着一个女人的鞋子走路很难。这就是为什么我们时不时需要一些特别的鞋子，让走路更有趣，
“好莱坞的假金属片背后隐藏着真正的金属片。”
],
行=3，
引用，最后引用，
$quote=$（'.quote'），
GetDifferentitQuote=函数（）{
quote=quotes[Math.floor（Math.random（）*quotes.length）]；
如果（quote==lastQuote）{
返回getDifferentitQuote（）；
}否则{
lastQuote=报价；
返回报价；
}
},
changeQuote=函数（）{
quote=GetDifferentitQuote（）；
设项=$（“”{
正文：引文，
类别：“测试员”
});
项目.附录（$（“正文”）；
设desiredHeight=item.height（）*行；
item.css({
空白：“正常”，
宽度：30+‘像素’
});
while（item.height（）>desiredHeight）{
css（{width:（item.width（）+1）+'px'}）；
}
$quote.css（{width:item.width（）+'px'}）；
$quote.text（item.text（））；
项。删除（）；
};
$（'button'）。在（'click'，changeQuote'）上；
$（窗口）。加载（changeQuote）
.holder{
显示器：flex；
证明内容：中心；
对齐项目：居中；
利润率：30像素；
背景色：#F5；
最小高度：100px；
}
.引用{
文本对齐：居中；
}
.测试员{
位置：绝对位置；
空白：nowrap；
显示：块；
不透明度：0；
}

更改报价
可能重复@LGSon，他不是在寻找修剪文本的解决方案。在Gyoo，使用CSS是不可能做到这一点的，即使在JavaScript中，您提供的描述也不够。您可能需要的不仅仅是一些行。我将尝试提供一个
JS
解决方案，只是为了好玩。@AndreiGheorghiu在重读这个问题后，你很可能是对的，OP并不认为我的建议是骗人的。谢谢你非常完整的回答：）为了回答你所说的，我来这里是为了两者：我想学习，因为我还不是CSS专家，而且这只是一个个人项目，所以雇佣一个专业人士似乎不值得。我将尝试尽快测试您的解决方案，但这似乎确实是一个很好的工作基础。我可能会对它进行一些调整，使其具有最小线宽，但这是我自己的问题：）