javascript - Css dynamic font-size -

i try make special screen dynamic in angularjs.

i screen there object define size:

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

there items insert ng-repeat loop base on return of api.

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

problem items round , have best render i'd change font size of content (here ctrl.name) if content long fit container.

i find jquery solution if it's possible i'd avoid them , if it's possible i'd pure css solution.

have idea ?

you can put expression on ng-style:

ternary

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

method

controller

$scope.getfontsize(ctrlname) {     if (ctrlname.length > 10) {         return '12px';     }      return '14px'; }; 

view

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

plus: ng-class

you can create classes differnt font-sizes:

css

.itemsmall {     font-size: 12px; } .itembig {     font-size: 14px } 

view

<div class="itemglobalcode"      ng-class="{'itemsmall': ctrl.name.length > 10, 'itembig': ctrl.name.length <= 10}"></div>