javascript - Angular .js : How to reduce font size dynamically based on characters' length?

标签 javascript jquery css angularjs

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

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

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

那么有什么方法可以查看 div 的内容并根据字符长度动态应用不同的字体大小吗?

最佳答案

使用ng-classname 很长时将一个类附加到元素

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

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

关于javascript - Angular .js : How to reduce font size dynamically based on characters' length?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37342621/

相关文章:

javascript - 两个 div 同时设置动画

javascript - 数据表更改颜色背景

javascript - 将事件添加到 Polymer 中的子菜单标题

javascript - jQuery onclick 事件为打开 View 页面添加动态选项卡

javascript - 在 AngularJS 1.5 的内部组件之间传递函数的最佳方式是什么?

javascript - 将类对象传递给 ReactJS 组件

javascript - 如何告诉 jQuery 仅在两个特定网页上运行某个函数?

javascript - 删除标题和导航之间的间距

css - 如何使用 CSS 定位让页脚位于主要内容区域下方?

javascript - Highcharts 极坐标图 : Multiple pane segment colors