Intereting Posts
Рисование растровых изображений быстрее на холсте Android или OpenGL Что такое не встроенная активность и почему в ней не работает андроид: fitsSystemWindows? App Widget не отображается в списке виджетов на устройствах Honeycomb до тех пор, пока Launcher не будет перезапущен Есть ли способ отключить предупреждения xml? Как добавить событие OnClick для пользовательского вида Android В чем смысл журнала из тега: «szipinf» и текст: «Инициализация состояния раздувания» из Logcat Android: получить Viewgroup с точки зрения? Рекомендуемый способ получить активность внутри экрана раствора? Android notfication BigPictureStyle исчезающий текст Как настроить цвет и текст режима действия? Как получить список строк из Firebase, чтобы заполнить Spinner Ошибка Eclipse: неверный путь для ndk? Храните элемент с высоким списком с помощью SimpleCursorAdapter Открытый ключ Google Open Repo GPG не найден Этот класс обработчика должен быть статическим или может возникнуть утечка: AsyncQueryHandler

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

СИТУАЦИЯ:

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

Мне нужно отобразить список информации о некоторых людях. Чтобы получить, что я использую ионный список <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:

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

ВОПРОС:

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

Solutions Collecting From Web of "Ионный: как отображать ионный элемент на нескольких линиях?"

Класс 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> 

Для пользователей 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 для атрибутов, которые могут быть добавлены в ion-item чтобы преобразовать текст.

Вы должны перезаписать 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> 

Для того, чтобы:

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