适合容器内的实时文本

Question

我正在使用Angular 2（现在）2路数据绑定，我需要在页面的整个宽度上显示H1。因此，文本越多，它就越小。如果文本量缩小，则更大。

我看到http://fittextjs.com，但仅在页面init上调整大小。

我需要实时。

谢谢！

Answer 1

我正在使用此

https://github.com/jquery-textfill/jquery-textfill

您可以在需要时（文本渲染后）调用它们，只需调用

即可

$('#my-element').textfill({
        maxFontPixels: 36
    });

它可以自定义。

快乐的编码！

Answer 2

编辑： 我理解这个问题现在用任何长度单位替换px

<h1 ng-style="{'max-width':'100%', 'font-size':  inputlength + 'px'}">{{input}}</h1>

你可能需要调整它，但是你想让它工作 基本上必须执行像font-size这样的逻辑：calc（100％+ 2vw） 或者在您的控制器中进行操作

 $scope.input = "ssssssss";
               $scope.inputlength = 10;
                $scope.$watch('input', function(){
                     $scope.inputlength = window.innerWidth / $scope.input.length;
                });