缩放文本以适应其容器

Question

所以我使用 v-for 从数组中映射出一些对象。这些卡片包含一些文字，我将它们放入卡片中。这些卡片形成一个完整的部分，并且都应该具有相同的高度。我可以使用 max-height 并使用 @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>