CODEWITHSUNDEEP
cssionic-frameworkionic2
Yuyang He
Yuyang He

Reputation: 2272

ionic - How to wordwrap a long string in ion-header

This is my code, and I tried text-wrap , inside ion-header still can not show whole title.

<ion-header>
  <ion-toolbar text-wrap color="danger">
    <ion-buttons>
        <button ion-button navPop icon-only>
            <ion-icon ios="ios-arrow-back" md="md-arrow-back"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>{{new.title}}</ion-title>
  </ion-toolbar>
</ion-header>

enter image description here

Update

<ion-header>
  <ion-toolbar color="danger">
    <ion-buttons>
        <button ion-button navPop icon-only>
            <ion-icon ios="ios-arrow-back" md="md-arrow-back"></ion-icon>
        </button>
    </ion-buttons>
    <ion-item color="danger" text-wrap>
     <ion-title >{{new.title}}</ion-title>
    </ion-item>
  </ion-toolbar>
</ion-header>

I tried add ion-item there, but still not working for me. enter image description here

Update 2

.ios .toolbar-title {
   text-overflow: inherit;
   white-space: normal;
   text-align: left;
   font-size:1.3em;
}

.md .toolbar-title {
   text-overflow: inherit;
   white-space: normal;
   text-align: left;
   font-size:1.3em;
}

enter image description here

Upvotes: 13

Views: 15194

Answers (4)

Shk&#235;lzen Vishi
Shk&#235;lzen Vishi

Reputation: 46

A quick work around is to set mode="md" prop to ion-title.

<ion-title mode="md">{{new.title}}</ion-title>

Upvotes: 0

Finesse
Finesse

Reputation: 10801

Add an extra wrapper to your <ion-title> content to enable the wrapping:

<ion-title>
  <div style="white-space: normal;">
    {{new.title}}
  </div>
</ion-title>

Additionally, if you want the title to extend the header when there is too much text, add the following CSS code:

ion-title {
  position: static;
}

Upvotes: 6

AndrWeisR
AndrWeisR

Reputation: 1226

A little neater than Finesse's answer (for Ionic 5):

<ion-title>
  <div class="ion-text-wrap">
    {{new.title}}
  </div>
</ion-title>

Upvotes: 17

Mankeomorakort
Mankeomorakort

Reputation: 1471

Pls update your css file as below :

.toolbar-title {
   text-overflow: inherit;
   white-space: normal;
}

Edited:

Or

.toolbar-title {
   text-overflow: unset;
   white-space: unset;
}

Upvotes: 15

Related Questions