Css динамический размер шрифта

Question

Я стараюсь сделать специальный экран очень динамичным в AngularJS.

Я этот экрана есть некоторый объект с определением размера:

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

Там детали были вставки с помощью основания петли нг-повтора на возвращении в API.

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

Проблема мои вещи были круглыми и иметь лучший рендеринг я бы хотел, чтобы изменить размер шрифта содержания (здесь ctrl.name), если это содержание было много времени, чтобы поместиться в контейнере.

Я нахожу решение jQuery, но если возможно, я бы хотел их избежать, и если бы это было возможно, мне бы хотелось получить чистое решение CSS.

У вас есть идея?

Answer 1

Вы можете поместить выражение на нг стиле:

троичной

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

Plus: нг-класс

Вы также можете создавать классы с различными размерами шрифта:

CSS

Просмотр

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

Answer 2

Вы можете использовать нг класса директивы

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