Tab title / text is truncated / chopped in iPhone

ionic-v1
1

I have five tabs in bottom of my app - on iPhone 5C and 4S (not tested on anything else) the tab title text is being truncated, the above should read “School home”. On Android it displays fine, the tab width seems to adjust to the text width (ie it allocates more space to this tab than the others).

As can be seen below I tried using   for the space but still the same.

Thanks, Kevin

<ion-tabs class="tabs-striped tabs-background-positive tabs-light tabs-icon-top">
  <ion-tab title="News" icon="icon ion-ios7-paper-outline" href="#/tab/news">
    <ion-nav-view name="news-tab"></ion-nav-view>
  </ion-tab>
  <ion-tab title="Contact" icon="icon ion-ios7-telephone" href="#/tab/contact">
    <ion-nav-view name="contact-tab"></ion-nav-view>
  </ion-tab>
  <ion-tab title="School&nbsp;home" icon="icon ion-ios7-information-outline" href="#/tab/info">
    <ion-nav-view name="info-tab"></ion-nav-view>
  </ion-tab>
 <ion-tab title="Calendar" icon="icon ion-calendar" href="#/tab/calendar">
    <ion-nav-view name="calendar-tab"></ion-nav-view>
  </ion-tab>
  <ion-tab title="More" icon="icon ion-navicon-round" href="#/tab/more">
    <ion-nav-view name="more-tab"></ion-nav-view>
  </ion-tab>
</ion-tabs>
2

UPDATE

I just tried “Schoolhome” as the title - i.e. no space at all, and it still gets truncated, which explains why using the &nbsp; did not fix it, I guess.

I’ve looked for some overflow setting in the CSS but cannot find it.

3

Anyone any ideas please?