Javascript 如何根据文本长度使文本最适合？

我有一个显示用户公司名称的页面。这家公司可以有一个很长的名字，也可以有一个很短的名字。两者都应自动更改字体大小，使文本完全适合元素：

<h1 class="sidebar-compName responsiveText">{{user.companyName}}123456789</h1>

{{user.companyName}123456789

（123456789用于测试它是否工作，h1元件的宽度是否为200px） 这就是它的样子：

我创建了一个系统，当你有1个文本应该是响应的时候，它就可以工作。 （因为它是一个while循环，当它必须循环多次时，它会使浏览器崩溃）

//加载所有内容时调用的angularjs函数
$scope.adjustFontsSize=函数（值）{
//使用“responsiveText”类获取所有元素
var elems=document.getElementsByClassName（“responsiveText”）；
//循环通过所有元素
对于（变量i=0；ielems[i].offsetWidth）{
大小--；
元素[i].style.fontSize=size+px；
}
}
}

这只能减小字体大小。这就是它需要标准尺寸的原因

在我的系统中，它看起来是这样的：

现在，我希望对多个元素（使用“responsiveText”类）执行此操作，并通过增加和减少字体大小使其完全适合。 但我似乎不知道怎么做

这也将是非常好的，有一个抵消它。 所以我给它一个类“rt1”，它适合元素内部尽可能大的文本，“rt2”应该适合文本，但比元素内部的“rt1”小一点

编辑： 这不是一个复制品

---

我已经有了“while”的可能性，但是当我需要更改很多元素时，这就不起作用了。

你可以使用插件调用。它基于元素的宽度。就像您控制每个

@媒体查询的字体大小一样（小于768px，大于993px，大于1200px，甚至更多）
我使用FitText.js（）

我还添加了一个偏移选项，我就是这样使用它的：

var elems = document.getElementsByClassName("responsiveText");
    for(var i = 0; i < elems.length; i++){
        jQuery(elems[i]).fitText();

        var text = elems[i].classList.value;
        var fontSize = elems[i].style.fontSize.split("px")[0];
        var offset = 0;

        if(text.includes("rt")){
            offset = text.slice(text.indexOf("rt") + 2).split(" ")[0];
        }

        elems[i].style.fontSize = (Number(fontSize) + Number(offset)) + "px";
    }

var elems=document.getElementsByClassName（“responsiveText”）；
对于（变量i=0；i

要使文本变小，我有如下元素：

<h1 class="sidebar-userName responsiveText rt-*">{{user.companyName}}</h1>

<h1 class="sidebar-userName responsiveText rt*">{{user.companyName}}</h1>

<h1 class="sidebar-userName responsiveText">{{user.companyName}}</h1>

{{user.companyName}

为了使其更大，我有一个如下元素：

<h1 class="sidebar-userName responsiveText rt-*">{{user.companyName}}</h1>

<h1 class="sidebar-userName responsiveText rt*">{{user.companyName}}</h1>

<h1 class="sidebar-userName responsiveText">{{user.companyName}}</h1>

{{user.companyName}

如果它是完美的尺寸而不使用偏移量，我就有这样一个元素：

<h1 class="sidebar-userName responsiveText rt-*">{{user.companyName}}</h1>

<h1 class="sidebar-userName responsiveText rt*">{{user.companyName}}</h1>

<h1 class="sidebar-userName responsiveText">{{user.companyName}}</h1>

{{user.companyName}

（将“*”替换为偏移值（以像素为单位）
我无法使其与FlowTypeJS一起工作。对我来说，它只是使用我提供的smalles字体大小：
$（elems[i]）.flowtype（{minFont:12，maxFont:100}）