Css动态字体大小

我试图在AngularJS中制作一个非常动态的特殊屏幕。Css动态字体大小

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

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

有项目是通过在API返回到NG-重复循环基部插入件。

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

问题是我的项目是圆形，有一个最好的渲染我想改变的内容（这里ctrl.name）的字体大小，如果这个内容是长到适合容器。

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

你有什么想法吗？

来源

2016-11-10 qchap

剪掉它，请。 –

你可以把一个表达上的NG-风格：

三元

<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>

加：纳克级

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

CSS

查看

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

来源

2016-11-10 12:26:52 Matheus

由于问题是关于纯粹的CSS解决方案，因此添加相应的类并在CSS中设置该类的样式会更加性感。 – CaptainCarl

@CaptainCarl你是对的，我会在回答中加上这个。 – Matheus

聪明我不认为这种类型的方法谢谢 – qchap

你可以使用纳克级的指令

<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(); 
}

来源

2016-11-10 12:36:52

Css动态字体大小

回答

相关问题