Problem with ion-tabs when there are many tabs

Ionic Framework ionic-v3
1

I want to have these 11 tabs in my ionic 2 app but they are either overlapping or this, have tried a lot of css but couldn’t get through. Please help, thanks.

Image:

https://gyazo.com/361456b7ee2fa44fa4482b2acbd1823a

HTML code:

<ion-tabs #ionTabs [color]="navParams.data.color" tabsHighlight="true" tabsPlacement="{{tabsPlacement}}" text-wrap padding>
  <ion-tab *ngFor="let tab of tabs" [root]="tab.component" [rootParams]="navParams.data" [tabsHideOnSubPages]="true" tabTitle="{{ tab.title }}" tabIcon="{{ tab.icon }}"></ion-tab>
</ion-tabs>
2

Why would you have 11 tabs? such a bad design