Javascript 无论文本有多大，都要使文本适合框

我在尝试将长文本放入框中时遇到问题。由于客户的设计规范，我无法更改盒子的大小，因此我必须获得适合盒子的文本。它可以通过html css js或jquery实现，只要达到预期效果，这并不重要

我的名字是30个字符
我的名字很短

以下是我试图实现的目标的屏幕截图：

这是一个很长的名字：

谢谢你的帮助

---

这可能有助于解决文本大小调整的问题。

根据百分比或视口设置字体大小。如果我的用户有一个短名称，它适合框，如果我的用户有一个很长的名称，它不适合并溢出，正如你们所见，我不希望框重新调整大小，我希望文本缩小并适合框。视口对bc没有帮助，我们不是在讨论分辨率。我不认为这是重复的，因为其他解决方案并没有解决我的问题这个答案提到使用

vw

单元来实现纯CSS解决方案。

<div class="mybutton">
  <div class="myproblem">
    MyNameIs30CharactersLong
  </div>
  <div class="myproblem2">
    MyNameIsShort
  </div>
</div>