CSS动态字体大小答案

【问题标题】：Css dynamic font-sizeCSS动态字体大小
【发布时间】：2016-11-10 20:45:01
【问题描述】：

我尝试在AngularJS 中制作一个非常动态的特殊屏幕。

我这个屏幕有一些具有定义大小的对象：

.item
{
  margin: auto;
  margin-bottom: 10px;
  width: 11vw;
  height: 11vw;
  text-overflow: ellipsis;
  overflow: hidden;
}

根据API 的返回，ng-repeat 循环插入了这些项目。

  <div class="item"
       ng-click="ctrl.clickFunction()"
       ng-style="{'background-color':ctrl.color }">
    <div class="itemGlobalCode">{{::ctrl.name}}</div>
  </div>

问题是我的项目是圆形的，并且为了获得最佳渲染效果，如果此内容过长以适应容器，我想更改内容的字体大小（此处为 ctrl.name）。

我找到了一些jQuery 解决方案，但如果可能的话，我想避免它们，如果可能的话，我想要一个纯粹的CSS 解决方案。

你有什么想法吗？

【问题讨论】：

请剪掉它。

标签： javascript html css angularjs ionic-framework

【解决方案1】：

你可以在 ng-style 上加一个表达式：

三元

<div class="itemGlobalCode"
     ng-style="{'font-size': ctrl.name.length > 10 ? '12px' : '14px'}"></div>

方法

控制器

$scope.getFontSize(ctrlName) {
    if (ctrlName.length > 10) {
        return '12px';
    }

    return '14px';
};

查看

<div class="itemGlobalCode"
     ng-style="{'font-size': getFontSize(ctrl.name)}"></div>

加：ng-class

您还可以创建具有不同字体大小的类：

CSS

.itemSmall {
    font-size: 12px;
}
.itemBig {
    font-size: 14px
}

查看

<div class="itemGlobalCode"
     ng-class="{'itemSmall': ctrl.name.length > 10, 'itemBig': ctrl.name.length <= 10}"></div>

【讨论】：

由于问题是关于纯 CSS 解决方案，因此相应地添加一个类并在 CSS 中设置该类的样式会更性感。
@CaptainCarl 你是对的，我会在答案中添加这个。
聪明，我不会考虑这种方法，谢谢

【解决方案2】：

你可以使用 ng-class 指令

<div class="item"
   ng-click="ctrl.clickFunction()"
   ng-class="{'css-class1':condition1, 'css-class2':condition2() }">
<div class="itemGlobalCode">{{::ctrl.name}}</div>

在你的控制器中：

$scope.condition1 = true;
$scope.condition2 = function(input) {
     // or calculate,do something with the input
    return input.isTrue();
}

【讨论】：