离子：如何在多条线上显示离子项？

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：

这是一个重现这种情况的掠夺者。您可以尝试调整浏览器或内部窗口的大小，然后您可以看到ion-item如何删除额外内容。

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

问题：

如何在<ion-item>元素中显示额外内容？
是否可以多行显示内容？

Answer 1

对于Ionic 2用户，您可以使用<ion-item text-wrap> Multiline text that should wrap when it is too long to fit on one line in the item. </ion-item> 属性：

ion-item

您还可以看到Utility Attributes Documentation可以添加到import java.util.Map; import com.google.gson.Gson; import com.google.gson.JsonElement; import com.google.gson.JsonObject; import com.google.gson.JsonParser; JsonParser parser = new JsonParser(); //e.getKey() is actual 'category' name //e.getValue() is raw JsonObject Map.Entry<String, JsonElement> e = ((JsonObject)parser.parse(jsonString)).entrySet().iterator().next(); Gson g = new Gson(); SummonerDto dto = g.fromJson(e.getValue(), SummonerDto.class); 以转换文字的属性。

Answer 2

编辑：虽然标记为已接受，但这个答案是为早期版本的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>

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

Answer 4

您应该覆盖添加到特定<ion-item>的默认CSS，例如，更改：

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

Answer 5

仅当您有两行时，这些解决方案才起作用...如果您有很多行，并且想要全部显示，请将其添加到组件的scss中：

.item-block {
    height: auto;
}

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