Ionic: Comment afficher l'élément ionique sur plusieurs lignes?

LA SITUATION:

J'utilise Ionic pour créer une application.

  • Est-il possible d'exécuter R à partir d'une tablette en utilisant Honeycomb (Android 3.0)?
  • Test de la barre de progression sur Android avec Espresso
  • Comment vérifier si un service fonctionne sur Android?
  • Cryptage / décryptage Android avec AES
  • ObjectAnimator onAnimationEnd l'auditeur est appelé avant l'achèvement de l'animation
  • ListView réutilise les vues lorsque ... Je ne le veux pas
  • J'ai besoin d'afficher une liste d'informations concernant certaines personnes. Pour obtenir que j'utilise la liste ionique <ion-list> avec <ion-item> puisque la mise en page qu'il offre est exactement ce dont j'ai besoin.

    Le seul problème est que chaque <ion-item> semble être obligé de rester sur une seule ligne, en coupant le texte supplémentaire qu'il contient, comme l'a montré l'image:

    Entrez la description de l'image ici

    LE CODE:

     <ion-list> <ion-item class="item"> Name: <b> {{ person.name }} </b> </ion-item> <ion-item class="item"> Email: <b> {{ person.email }} </b> </ion-item> <ion-item class="item"> Title: <b> {{ person.title }} </b> </ion-item> <ion-item class="item"> Bio: <b> {{ person.bio }} </b> </ion-item> </ion-list> 

    PLONGEUR:

    Voici un pommier qui recrée la situation. Vous pouvez essayer de redimensionner le navigateur ou la fenêtre interne, et vous pouvez voir comment ion-item coupe le contenu supplémentaire.

    LA QUESTION:

    Comment puis-je afficher le contenu supplémentaire dans un <ion-item> ?
    Est-il possible d'afficher le contenu dans plusieurs lignes?

  • Mode Avion en Jelly Bean
  • Application Android: Comment lire obtenir des paramètres à partir d'un schéma d'url personnalisé?
  • Android envoyant des demandes de publication à django server csrf failing
  • Un comportement étrange pour l'opération regualr sqlite sur Android
  • FragmentStatePagerAdapter avec ChildFragmentManager - FragmentManagerImpl.getFragment résulte de NullPointerException
  • Com.android.internal.policy.impl.PhoneLayoutInflater restant parfois en mémoire (hprof dumps)
  • 3 Solutions collect form web for “Ionic: Comment afficher l'élément ionique sur plusieurs lignes?”

    L' élément de classe -enveloppement de texte devrait vous aider, comme ceci:

     <ion-item class="item item-text-wrap"> bio: <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </b> </ion-item> 

    Pour les utilisateurs Ionic 2, vous pouvez utiliser l'attribut text-wrap comme text-wrap :

     <ion-item text-wrap> Multiline text that should wrap when it is too long to fit on one line in the item. </ion-item> 

    Vous pouvez également voir la Documentation des attributs d'utilité pour les attributs qui peuvent être ajoutés à l' ion-item pour transformer le texte.

    Vous devez écraser le CSS par défaut ajouté à l' <ion-item> spécifique, par exemple, modifier:

     <ion-item class="item"> bio: <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </b> </ion-item> 

    À:

     <ion-item class="item" style="white-space: normal;"> bio: <b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </b> </ion-item> 
    coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.