Ionique: Comment faire pour afficher ion-point sur plusieurs lignes?

LA SITUATION:

Je suis en utilisant Ionique pour construire une application.

J'ai besoin d'afficher une liste des informations sur certaines personnes.
Pour obtenir que je suis en utilisant le ionique liste <ion-list> avec <ion-item> depuis la mise en page, il propose c'est exactement ce dont j'ai besoin.

Le seul problème, c'est que chaque <ion-item> semble être forcés de rester sur une seule ligne, couper le texte qu'il contient, comme le montre l'image:

Ionique: Comment faire pour afficher ion-point sur plusieurs lignes?

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>

PLUNKER:

Ici est un plunker qui recrée la situation. Vous pouvez essayer de redimensionner le navigateur, ou à l'intérieur de windows, et vous pouvez voir comment les ions de l'élément de découper le contenu supplémentaire.

http://plnkr.co/edit/Qx9fYRpiATK4lgj5g5Rk?p=preview

LA QUESTION:

Comment puis-je afficher le contenu supplémentaire dans un <ion-item> élément?

Est-il possible d'afficher le contenu dans plusieurs lignes?

Nous allons sans doute avoir besoin de voir la sortie HTML & CSS dans une démo.
Ok, je vais faire un js fiddle
Pourquoi est-ce une question de voter pour le fermer. Peut les électeurs préciser ?
vous avez probablement besoin de regarder le texte de débordement de la propriété CSS
désolé, j'ai corrigé le lien

OriginalL'auteur FrancescoMussi | 2015-06-19

  1. 38

    Classe article-texte-wrap devraient 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>
    Ce doit être la accepté de répondre.

    OriginalL'auteur carpiediem

  2. 54

    Pour Ionique 2 utilisateurs, vous pouvez utiliser text-wrap attribut:

    <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 les Utilitaire Attributs De La Documentation pour les attributs qui peuvent être ajoutés à ion-item pour transformer le texte.

    Bon de souligner la solution Ionique 2. Merci!
    très bon d'ajouter ce pour les ionique 2
    Cela fonctionne pour Ionique 3.

    OriginalL'auteur Amit Gupta

  3. 3

    Vous devez remplacer la valeur par défaut CSS ajouté à l'précis <ion-item>, par exemple, de 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>

    OriginalL'auteur Mark Veenstra

  4. 0

    Dans Ionique v4 vous pouvez joindre la text-wrap attribut à la ion-label composant à l'intérieur d'un ion-item. Par Exemple: 

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

    OriginalL'auteur Phil