web-dev-qa-db-fra.com

Comment enrouler une longue chaîne dans ion-item

IONIC a deux problèmes avec Word-wrap dans ion-item: 1. String serait tronqué par les points ajoutés à la fin. Comment afficher le contenu complet sans points? 2. Les sauts de ligne automatiques et responsive ne fonctionnent pas dans Firefox (Chrome est ok), comment résoudre ce problème dans 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>

Toute aide serait très appréciée. Meilleures salutations. Voici HTML complet pour montrer le problème codepen

ionic-frameworkword-wrap
51
DinDin

Pour ionic 1:

Ajouter item-text-wrapclasse à l'élément.

<ion-item class="item-text-wrap">
  some long string
</ion-item>

Pour ionic 2:

Ajouter text-wrapattribut à l'élément.

<ion-item text-wrap>
  some long string
</ion-item>
108
Mudasser Ajaz

Dans Ionic 2, utilisez le text-wrap attribut

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

Si vous voulez qu'une classe CSS personnalisée ait le même effet d'habillage de Word, ajoutez simplement

white-space: normal;

à votre classe.

Source: forum ionique

19
Guillem Cucurull

Pour Ionic 4, utilisez text-wrap Sur ton ion-label élément, comme ceci:

<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>
5
NickyTheWrench

Ionic 4

class = "ion-text-wrap" 

  <ion-item>
    <ion-label class="ion-text-wrap">Long Text</ion-label>
  </ion-item>

Lien

1
Code Spy