Problem using text-wrap and ion-item

Ok, this allows text to wrap:

<ion-item text-wrap>
	add your text here it will wrap it 

In my .ts file, i have a list of sortable card, but using an <ion-item> inside the card-list, problems arise.

Why the <ion-item> inside my card has the (ionItemReorder)="reorderItems($event)" ?
Ok the gray background, cause off .scss.

That’s my .ts file:

 <ion-content class="paginaListeDellaSpesa">
    <ion-list no-lines reorder="true" (ionItemReorder)="reorderItems($event)">
        <ion-item *ngFor="let lista of elencoListe">

                        <ion-col width-75>
                                        Descrizione: {{lista.descrizione}}
                                <p>Frequenza: {{lista.frequenza}}</p>

                        <ion-col width-25>
                            <img src="{{lista.userImg}}" class="imgLista" />
                            <button clear small danger (click)="goTo($event)">
                            <ion-icon name='archive'></ion-icon>

                            <button clear small danger (click)="editLista(lista)">
                            <ion-icon name='paper'></ion-icon>

                            <button clear small danger (click)="deleteLista(lista)">
                            <ion-icon name='trash'></ion-icon>


and my *.scss file:


if it were possible to add the text-wrap to other object, it would be perfect…
Like that (but without the wrap and the <ion-item> implemented):

1 Like

You don’t need an ion-item just to use text-wrap. You can include it in a label.

<label text-wrap>
	add your text here it will wrap it 

I tried it, but if I remember correctly, it give some problems…
Tomorrow at work, i will try again and give some feedback :sweat:

@DeeM52, unfortunately it does not work your solution.
Hope that screenshot help to solve the problem.


screenshot from device

Tried with no luck:

<div class="item item-text-wrap">
    Text to wrap: {{lista.descrizione}}

At least stops in the container… But it does not wrap,

What happens when you put text-wrap directly in the main ion-item?

<ion-item *ngFor="let lista of elencoListe" text-wrap>


Yes! I’m so dumb!

or will cause the font-size to shrink??

your label attribute works or ion-label works, BRAVO! (ionic v3)

what a waste of time to have to chase for a default behavior like text “wrap around”
CSS and IONIC need another 20 years growth.