SVG或HTML文本可以扩展以完全适合容器，因此它可以纵向和横向拉伸，无视纵横比

Question

我需要在两个维度中自动拉伸文本，以填充容器。它会扭曲。

这显示红色的容器空间

这显示了长名称通常会调整大小以放入该空间并保持宽高比
。

这显示了我的客户想要发生的事情

我更喜欢使用SVG，但我会使用有效的方法。

我已经搜索了最好的解决方案，但是当页面或视图框改变尺寸时，似乎都指的是保持纵横比或拉伸文本。

Answer 1

这是一个相当广泛的问题，但是你可以用svg来做，我会让你实现它，因为你没有提供任何可以咀嚼的东西。

关键是要将您的svg＆＃39; preserveAspectRatio设置为UIStepper：

＆＃13;

＆＃13;

"none"

＆＃13;

svg{
  height: 100vh;
  width: 50vw;
  }
body{
  margin:0;
  }

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您的文本已经是SVG的一部分（如您的示例中所示），则可能需要使用嵌套的<svg>元素。

＆＃13;

＆＃13;

<svg width="400" height="400">

  <rect width="400" height="400" fill="rebeccapurple"/>
  
  <!-- rect representing area that our text has to squeeze into -->
  <rect x="20" y="50" width="200" height="50" fill="white"/>

  <!-- x y width height match above rect -->
  <!-- viewBox values need to match text bounds -->
  <svg x="20" y="50" width="200" height="50"
       viewBox="0 8 244 28" preserveAspectRatio="none">

    <text x="0" y="35" font-family="Verdana" font-size="35">
      HELLO THERE
    </text>
  </svg>  
    
</svg>

＆＃13;

＆＃13;

＆＃13;

最难的部分是为viewBox制定正确的值。它需要匹配（正常的非压缩）文本的边界。