CSSの動的フォントサイズ

Question

私はAngularJSで非常に動的な特別な画面を作ろうとしています。

Iこの画面定義サイズといくつかのオブジェクトがある：

.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）コンテンツのフォントサイズを変更したいと思いレンダリングすることです。

私はいくつかの解決策を見つけましたが、可能であればそれらを避けたいと思います。可能であれば純粋なCSSソリューションを希望します。

いくつかのアイデアはありますか？

Answer 1

あなたは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

ビュー

：NG-クラス

またdifferntフォントサイズを持つクラスを作成することができますあなたはNG-クラスディレクティブ

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

とあなたのコントローラで使用できる210

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

Answer 2

：

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