Come ricoprire una stringa lunga in ion-item

Question

IONIC ha due problemi relativi al wrapping automatico nell'elemento ionico: 1. La stringa verrebbe troncata dai punti aggiunti alla fine, come mostrare il contenuto completo senza punti? 2. Le interruzioni di riga automatiche e le risposte non funzionano in Firefox (Chrome è ok), come risolvere questo problema 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> 

Qualsiasi aiuto sarebbe molto apprezzato. I migliori saluti. Qui è pieno HTML per mostrare il problema codepen

Answer 1

Per ionico 1:

Basta aggiungere item-text-wrapclasse alla voce.

<ion-item class="item-text-wrap"> 
     #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion #fashion 
</ion-item> 

Per ionica 2:

Basta aggiungere text-wrapattributo alla voce.

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

Answer 2

Se si vuole una classe CSS personalizzato per avere lo stesso effetto il ritorno a capo, è sufficiente aggiungere

white-space: normal; 

alla classe.

Fonte: ionic forum

Answer 3

In ionico 2, utilizzare l'attributo text-wrap

<ion-item text-wrap> 
    text here wraps to multiple lines 
</ion-item>