html - Display flattened list items with count of more items that fit in a div -

i have few list items want display in flattened order on website. items not fit on same line, trying show count of 'how many more items' available. 8 items:

screen size 1: ============================== item1, item2, item3   +5 items ==============================  screen size 2: ==================================================== item1, item2, item3, item4, item5, item6    +2 items ==================================================== 

the skeleton of code have is:

<div class="col-md-10">   <span ng-repeat="item in items | canfit">     <span class="itemname">{{item}}</span>   </span> </div> <div class="col-md-2" ngshow="n>0">    <span>+{{n}} items</span> </div> 

i implemented using algorithm calculate character count, font-size, padding, screen size may change in future , trying have more agnostic of changes less perf impact.

is there simpler way achieve this?

ps: using angularjs bootstrap grid show items span10:(item1, item2, item3), span2: (+5 items)

i have read questions may helps angular material child alignment