Question

情况：

我需要将text-wrap用于离子卡，但它似乎不起作用。

代码：

<ion-card>

    <ion-card-header text-wrap>

        <h2> <ion-icon name="list-box"></ion-icon> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labor</h2>

    </ion-card-header>

    <ion-card-content>

        <p>content</p>

    </ion-card-content>

</ion-card>

THE PLUNKER ：

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

问题：

有一种方法可以为离子卡使用文本换行吗？

Answer 1

JsonConvert.DeserializeObject<Model>(json, new JsonSerializerSettings()
{
    ObjectCreationHandling = ObjectCreationHandling.Replace
});

您也可以在其他组件中使用文本换行。

Answer 2

好的，将white-space: normal;设置为ion-card-header修复此问题。

<ion-card-header style="white-space: normal;">也可以放在css文件中。

Plunker：http://plnkr.co/edit/GjDmJBNMdnoPiteAKpDB

Answer 3

white-space: normal;是正确的。但它应该放在标头标签IE h2上。默认情况下，“ion-labels”（可以注入DOM的类）应用white-space: nowrap;。因此，在标题标签上设置white-space: normal;可以通过css选择离子标签标签。

如何在Ionic 2中使用离子卡的文本换行？

3 个答案: