How to wordwrap a long string in ion-item

Ionic FrameworkWord Wrap

Ionic Framework Problem Overview


IONIC has two problems about word-wrap in ion-item:

  1. String would be truncated by the dots appended at the end, how to show full content without dots ?
  2. 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>

Link

Solution 6 - Ionic Framework

You can do it with CSS without adding ionic's volatile-garbage to your HTML like so

enter image description here

I think that means style any ion-label inside an ion-item with the following style...

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDinDinView Question on Stackoverflow
Solution 1 - Ionic FrameworkMudasser AjazView Answer on Stackoverflow
Solution 2 - Ionic FrameworkAaron BroadView Answer on Stackoverflow
Solution 3 - Ionic FrameworkNickyTheWrenchView Answer on Stackoverflow
Solution 4 - Ionic FrameworkGuillem CucurullView Answer on Stackoverflow
Solution 5 - Ionic FrameworkCode SpyView Answer on Stackoverflow
Solution 6 - Ionic FrameworkMeryanView Answer on Stackoverflow