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

СИТУАЦИЯ:

Я использую 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:

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

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

ВОПРОС:

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

Можно ли отображать содержимое в нескольких строках?

Ответ 1

ОБНОВЛЕНИЕ: Хотя помечены как принятые, этот ответ был написан для ранней версии Ionic. Скорее всего, вам понадобится один из ответов ниже для более новых версий.

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

Ответ 2

Для пользователей 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, чтобы преобразовать текст.

Ответ 3

В Ionic v4 вы можете прикрепить атрибут text-wrap к компоненту ion-label внутри элемента ion-item. Например:

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

Ответ 4

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

Ответ 5

Эти решения работают, только если у вас 2 строки... Если у вас много строк и вы хотите показать их все, добавьте это в scss компонента:

.item-block {
    height: auto;
}

.item-ios.item-block .item-inner {
    height: auto;
}