Question

我正在使用以下代码动态显示名称：

<div id="name">{{profile.name}}</div>

屏幕尺寸始终为320px 如果名称很短，它的工作正常，但如果名称很长，那么名称会被分成两行，这会扰乱我的布局。所以如果名字变得太长，我想自动缩小字体大小...

那么有没有办法观看div的内容并根据字符长度动态应用不同的字体大小？

Answer 1

name为

时，使用ng-class将字符附加到元素

<div id="name" ng-class="{'long': (profile.name.length > 20), 'verylong': (profile.name.length > 40)}">{{profile.name}}</div>

然后使用该类更改CSS中的字体大小。

Answer 2

<!DOCTYPE html>
<html>
<head>
    <title>change font size according to text length</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<!--change text inside below division if the string length is 20 or more it's font size will be 14px else 50px-->
<div id="text">Hello There I'm testing this text font size...!!!</div>

<script type="text/javascript">
    jQuery( document ).ready(function() {
        var length = jQuery('#text').html().length;
        //change length at which you want to change font-size
        if(length >= 20){
            //enter font-size if text is long
            $("#text").css({'font-size':'14px'});
        } else {
            //enter font-size if text is short
            $("#text").css({'font-size':'50px'});
        }
    });
</script>
</body>
</html>

您可以根据需要更改值...！ :) 此解决方案适用于JQuery。

Answer 3

根据字符的外观创建样式：

.20char{font-size: 20px}
.50char{font-size: 10px}

然后在Angular中，将ng-model绑定到该字段，您可以知道该字段有多少个字符：

$scope.fontsize = "20char";

if($scope.field.length <= 20)
         {
             $scope.fontsize = "20char"
         } else if ($scope.field.length > 20 && $scope.field.length <= 50)
         {
             $scope.fontsize = "50char"
         }

然后在HTML中将变量fontsize绑定到ng-class。

看到变量fontsize值必须与类的名称匹配。

我认为它应该有用。

Angular.js：如何根据字符的长度动态减小字体大小？

3 个答案: