How to wordwrap a long string in ion-item
Ionic FrameworkWord WrapIonic Framework Problem Overview
IONIC has two problems about word-wrap in ion-item:
- String would be truncated by the dots appended at the end, how to show full content without dots ?
- Automatic line breaks and responsive are not working in Firefox (Chrome is ok), how to fix this problem in Firefox ?
<div class="row responsive-sm">
<div class="col">
<div class="item item-body">
<ion-item class="wrap" style="word-wrap: break-word; word-break: break-all;">
#fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion
</ion-item>
</div>
</div>
</div>
Here is Full HTML to show the problem codepen
Ionic Framework Solutions
Solution 1 - Ionic Framework
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>
Solution 2 - Ionic Framework
In Ionic 2, use the text-wrap
attribute
<ion-item text-wrap>
text here wraps to multiple lines
</ion-item>
Solution 3 - Ionic Framework
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>
Solution 4 - Ionic Framework
If you want a custom CSS class to have the same word wrapping effect, just add
white-space: normal;
to your class.
Source: ionic forum
Solution 5 - Ionic Framework
Ionic 4
class="ion-text-wrap"
<ion-item>
<ion-label class="ion-text-wrap">Long Text</ion-label>
</ion-item>