缩放文本以适应其容器

Question

所以我使用v-for从数组中映射出一些对象。那些卡片里有一些文字，我把它们放在卡片里。这些卡片构成了一个完整的部分，并且应该都是相同的高度。我可以使用最大高度和@media和屏幕宽度缩放文本，但这意味着我对文本有5-6@media规则，手动缩放它，使容器保持相同的高度。

我尝试过使用不同的字体大小规则，如clamp、calc、vw和line clamp(它确实在第二行的末尾放了"…"，但文本会更进一步而不会被剪切(。为了把它放在卡片上，我使用了{{title.substring(0，50(}}。

有人告诉我，有一种很好、简单、干净的方法可以缩放文本，这样它就可以在不改变尺寸的情况下适应容器。

谢谢！

Answer 1

您可以使用SVG缩放文本：

.container {
display: flex;
justify-content: center;
resize: both;
overflow: scroll;
border: solid 1px;
width: 200px;
height: 100px;
}

<div class="container">
<svg viewBox="0 0 80 20">
<text x="2" y="15">Hello world</text>
</svg>
</div>