Ионный: как отображать ионный элемент на нескольких линиях?

Question

СИТУАЦИЯ:

Я использую Ionic для создания приложения.

Мне нужно отобразить список информации о некоторых людях. Чтобы получить то, что я использую ionic list<ion-list> вместе с <ion-item>, так как он предлагает именно то, что мне нужно.

Единственная проблема заключается в том, что каждый <ion-item>, кажется, вынуждены оставаться на одной линии, сокращая дополнительный текст он содержит, как показано это изображение:

КОД:

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

Вот плункер, который воссоздает ситуацию. Вы можете попробовать изменить размер браузера или внутренних окон, и вы можете увидеть, как ионный элемент вырезает лишний контент.

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

ВОПРОС:

Как я могу отобразить дополнительное содержание в <ion-item> элемента?
Можно ли отображать содержимое в нескольких строках?

Answer 1

Класс item-text-wrap должен помочь вам, как это:

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

Answer 2

Вы должны перезаписать CSS по умолчанию добавляется к конкретному <ion-item>, например, изменение:

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

To:

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

Answer 3

Для пользователей Ionic 2 вы можете использовать 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> 

Вы также можете увидеть Utility Attributes Documentation для атрибутов, которые могут быть добавлены в ion-item преобразовать текст.