Angular.js：如何根据字符长度动态减小字体大小？
Posted
技术标签:
【中文标题】Angular.js：如何根据字符长度动态减小字体大小？【英文标题】：Angular.js: How to reduce font size dynamically based on characters' length? 【发布时间】：2016-09-17 11:29:35 【问题描述】：我正在使用以下代码动态显示名称：
<div id="name">profile.name</div>
屏幕尺寸始终为 320 像素 如果名称很短，它可以正常工作，但如果名称很长，那么名称会分成两行，这会干扰我的布局。因此，如果名称变得太长，我想自动减小字体大小...
那么有什么方法可以查看 div 的内容并根据字符长度动态应用不同的字体大小？
【问题讨论】：
而不是更改字体大小，您可以尝试使用 css 省略号并将值作为标题。所以它会在元素悬停时显示。 【参考方案1】：根据您希望字符的外观创建样式：
.20charfont-size: 20px
.50charfont-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的值必须和类名匹配。
我认为应该可以。
【讨论】：
【参考方案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。
【讨论】：
【参考方案3】：当name 很长时，使用ng-class 将类附加到元素
<div id="name" ng-class="'long': (profile.name.length > 20), 'verylong': (profile.name.length > 40)">profile.name</div>
然后使用该类更改 CSS 中的字体大小。
【讨论】：
您也可以将该表达式拉出到您作用域的对象中并将其传递进去。这样会更容易测试并且看起来更好。 @ste2425 我知道这是一篇很老的帖子，但如果你（或其他人）能展示一个例子就好了以上是关于Angular.js：如何根据字符长度动态减小字体大小？的主要内容，如果未能解决你的问题，请参考以下文章
uitableviewcell 具有动态高度或减小字体大小以将多行放入一个单元格