时间戳

首页 > 解决方案 > 如何根据文本长度使文本最适合？

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

问题描述

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

<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

现在我希望为多个元素（使用“responsiveText”类）完成此操作，并通过增加和减少字体大小以使其完美契合来完成。但我似乎无法弄清楚如何。

用它来抵消也很好。所以我给它一个类“rt1”，它适合元素内尽可能大的文本，而“rt2”应该适合文本，但比元素内的“rt1”小一点。

编辑：这不是动态调整字体大小以适应容器大小的副本

我已经有了“同时”的可能性，但是当我必须改变许多元素时，这将不起作用。

标签： javascripthtmlcss

解决方案

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

推荐阅读