Question

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

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

（123456789用于测试它是否有效且h1元素的宽度为200px）这是它的外观：https://imgur.com/a/LD6tTye

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

//angularjs function which gets called when all content is loaded
$scope.adjustFontsSize = function(value){
    //get all elements with the class "responsiveText"
    var elems = document.getElementsByClassName("responsiveText");
    //loop through all elems
    for(var i = 0; i < elems.length; i++){
        //set standard size to 50px
        var size = 50;
        elems[i].style.fontSize = size + "px";
        //resize untill it fits within the element (the -75 increases the size a little because it looks small without it)
        while (elems[i].scrollWidth -75 > elems[i].offsetWidth) {
            size--;
            elems[i].style.fontSize = size + "px";
        }
    }
}

这只能减小字体大小。这就是为什么它需要标准尺寸。

使用我的系统，它看起来像这样：https://imgur.com/gcpTPXf

现在我想要为多个元素（使用类＆＃34; responsiveText＆＃34;）完成此操作，并通过增加和减少字体大小来完成它。但我似乎无法弄清楚如何。

与它有一个偏移量也是非常好的。所以我给它上课＃34; rt1＆＃34;它使文本在元素内尽可能大，并且＆＃34; rt2＆＃34;应该适合文本，但比＆＃34; rt1＆＃34;在元素内部。

编辑：这不是Dynamically resize font size to fit container size

的副本

我已经拥有＆＃34;而＃34;可能性，但是当我必须改变许多因素时，这种方法不会起作用。

Answer 1

您可以使用插件调用FlowTypeJS。它基于元素的宽度。就像你控制每个@media queries的字体大小一样（小于768像素，大于993像素，大于1200像素，以及更多）

Answer 2

我使用FitText.js（https://github.com/davatron5000/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";
    }

使文字变小我有这样的元素：

<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>

（将“*”替换为以像素为单位的偏移值）

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

2 个答案: