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

THE SITUATION:

情况：

I am using Ionic to build an app.

我正在使用Ionic来构建应用程序。

I need to display a list of info regarding some people. To obtain that i am using the ionic list <ion-list> along with <ion-item> since the layout it offers it is exactly what i need.

我需要显示一些关于某些人的信息列表。为了获得我正在使用离子列表 以及 ，因为它提供的布局正是我所需要的。

The only problem is that each <ion-item> seems to be forced to stay on a single line, cutting the extra text it contains, as shown it the picture:

唯一的问题是，每个 似乎都*留在一条线上，切断它所包含的额外文本，如图所示：

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

PLUNKER：

Here is a plunker that recreates the situation. You can try to resize the browser, or the internal windows, and you can see how ion-item cut out the extra content.

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

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

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

THE QUESTION:

问题：

How can i display the extra content in a <ion-item> element?
Is it possible to display the content in multiple lines?

如何在 元素中显示额外内容？是否可以以多行显示内容？

3 个解决方案

#1

Class item-text-wrap should help you out, like this:

class 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

For Ionic 2 users, you can use text-wrap attribute as:

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

You can also see the Utility Attributes Documentation for attributes that can be added to ion-item to transform the text.

您还可以查看实用程序属性文档，了解可添加到ion-item以转换文本的属性。

#3

You should overwrite the default CSS added to the specific <ion-item>, for example, change:

您应该覆盖添加到特定 的默认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>

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>