Меню с вкладками, которое реагирует и изменяется в зависимости от количества вкладок

Question

Мне нужно создать меню с вкладками; эти вкладки поступают из массива меток с контроллера, поэтому я могу получить количество фактически доступных вкладок.

Выбранная вкладка всегда должна содержать полный ярлык вкладки и должна быть немного больше других; на вкладке «Другие» может отображаться только часть метки, заполненная точками

(например: если у меня есть 4 вкладки с названием test1, test2, test3, test4, если вкладки больше, чем меню, которое я вижу:

test1 te... te... te...

, вкладка test1 немного больше других).

Я на самом деле пытался с 3 различными классами динамически применяться с ng-классом (вкладки 1-5, 6-10, 11-15) и 3 классами для выбранной вкладки, каждый из которых имеет минимальную ширину в процентах;

• truncate - это класс, в котором все метки заполнены "..." (text-overflow: ellipsis и т. Д.)

• selected: класс, применяемый для выбранной вкладки, который делает вкладку белым (а не серым) и с другим цветом метки.

index.html:

<div class="tab-header-container">
        <div class="tab" ng-repeat="tab in tabs" 
            ng-class="{
                selected: tab.label==selectedTab.label, 

                'min-tabs': tabNum <=5,
                'min-tabs-selected-tab': tabNum <=5 && tab.label==selectedTab.label, 

                'med-tabs': tabNum > 5 && tabNum <= 10,
                'med-tabs-selected-tab': tabNum > 5 && tabNum <= 10 && tab.label==selectedTab.label,

                'max-tabs': tabNum > 10,
                'max-tabs-selected-tab': tabNum > 10 && tab.label==selectedTab.label
                }">
            <div class="shadow-corrector truncate"  ng-class="{selected: tab.label==selectedTab.label}" ng-click="onTabClick(tab)">
                {{tab.label | capitalize }}
            </div>
        </div> 
    </div>

index.css:

.min-tabs {
    min-width: 18%;
}

.min-tabs-selected-tab {
    min-width: 28%;
}

/* 6-10 tabs */
.med-tabs {
    min-width: 13%;
}

.med-tabs-selected-tab {
    min-width: 22%;
}

/* 11-15 tabs */
.max-tabs {
    min-width: 6%;
}

.max-tabs-selected-tab {
    min-width: 16%;
}

но происходит то, что заголовок выбранной вкладки отображается не полностью при выборе. Эта модель должна работать с максимум 15 вкладками, что на самом деле является максимально возможным количеством доступных вкладок.

Что произойдет, так это то, что вкладки будут занимать всю строку - и должны оставаться все в одной строке; выбранная вкладка немного больше; выбранная метка вкладки должна быть всегда показана полностью все вкладки должны занимать всю строку независимо от того, сколько их. Я знаю, что это не сложно, но у меня закончились идеи. Помощь будет принята с благодарностью.