Ionic - How to Wordwrap a Long String in Ion-Header

How to wordwrap a long string in ion-item

For ionic 1:

Add item-text-wrap class to item.

<ion-item class="item-text-wrap">
  some long string
</ion-item>

For ionic 2:

Add text-wrap attribute to item.

<ion-item text-wrap>
  some long string
</ion-item>

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

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;
}

ion-text-wrap not working inside ion-item and ion-row

Use just text-wrap, instead of class="ion-text-wrap"

<ion-item>
        <ion-label text-wrap>
            {{myText}}
        </ion-label>
    </ion-item>

Ionic 4 ion-title in toolbar is not centered on android

Ionic v4 keeps toolbar title on left for android devices and on center for IOS devices.

To use a particular behavior you can use mode="md|ios". md is for android and ios for IOS devices.

Since you want to make the title on center, you can use mode="ios" which will make the toolbar title to be on center for both android and ios devices.

This is my header:

<ion-header>
    <ion-toolbar mode="ios">
        <ion-title>
            Add New Rest
        </ion-title>
        <ion-icon slot="end" name="analytics"></ion-icon>
        <ion-buttons slot="start">
            <ion-buttons slot="start">
                <ion-back-button defaultHref="home"></ion-back-button>
            </ion-buttons>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

Have a look at the screenshot below

How to setup maximum lines of ion-label?

line height * number of lines = max height

.questionText {
max-height: 5.4em;
line-height: 1.8em;
height: 75%;
white-space: normal;
}

---

Related Topics