How to wordwrap a long string in ion-item
For Ionic 4, use text-wrap
on your ion-label
element, like so:
<ion-item>
<ion-label text-wrap>
Multiline text that should wrap when it is too long
to fit on one line in the item.
</ion-label>
</ion-item>
UPDATE: 10/30/2019 - CSS utility attributes are now deprecated in the latest version of Ionic 4, and will be going away completely in Ionic 5.
It is recommended to use class="ion-text-wrap"
moving forward:
<ion-item>
<ion-label class="ion-text-wrap">
Multiline text that should wrap when it is too long
to fit on one line in the item.
</ion-label>
</ion-item>
In Ionic 2, use the text-wrap
attribute
<ion-item text-wrap>
text here wraps to multiple lines
</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>