如何在ionic2中使文本换行？

Question

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

我需要显示一份沙拉清单。 我用<ion-list>和<ion-item>来构建它。 问题是项目只能显示在一行中。
下图所示：

编码

    <ion-list>
    <div class='title'>ALL SANDWICHES</div>
    <div text-wrap class='subtitle'>SERVED ON ARBUTUS SOURDOUGH BREAD
WHOLEMEAL SOURDOUGH & GLUTEN FREE ARE AVAILABLE</div>
        <ion-item *ngFor="let test of tests" class='item item-text-wrap'>
            <!-- <div>{{test.id}}</div> -->
            <div class='name' >{{test.name}} </div>
            <div class='info'>{{test.info}} </div>
            <div>€ {{test.price}}</div>
        </ion-item>
    </ion-list>

CSS

div.name{
    font-weight: bold;
}
div.info{
    font-size: 14px;
    text-align: justify;
    font-style: italic;
}  

似乎代码class='item item-text-wrap'和CSS text-align: justify; 不能工作。

问题
可以分多行显示内容吗？

Answer 1

因为您使用类来编辑文本。 所以它不起作用。 在Ionic 2中，它在ion-item标签中具有'text-wrap'属性。

  <ion-list>
     <div class='title'>ALL SANDWICHES</div>
     <div text-wrap class='subtitle'>SERVED ON ARBUTUS SOURDOUGH BREAD
       WHOLEMEAL SOURDOUGH & GLUTEN FREE ARE AVAILABLE</div>
    <ion-item *ngFor="let test of tests" text-wrap>
        <!-- <div>{{test.id}}</div> -->
        <div class='name' >{{test.name}} </div>
        <div class='info'>{{test.info}} </div>
        <div>€ {{test.price}}</div>
    </ion-item>
</ion-list>

欢呼！

Answer 2

如果将text-wrap （作为属性，而不作为类）放在ion-list ，则该列表中的所有项目都将应用文本换行效果。 这样，您无需将text-wrap指令放在所有项目中，并且无需对应用程序进行一些优化。

<ion-list text-wrap> <!-- Add text-wrap at this level -->
    <div class='title'>ALL SANDWICHES</div>
    <div class='subtitle'>SERVED ON ARBUTUS SOURDOUGH BREAD WHOLEMEAL SOURDOUGH & GLUTEN FREE ARE AVAILABLE</div>
        <ion-item *ngFor="let test of tests" class='item item-text-wrap'>
            <!-- <div>{{test.id}}</div> -->
            <div class='name' >{{test.name}} </div>
            <div class='info'>{{test.info}} </div>
            <div>€ {{test.price}}</div>
        </ion-item>
</ion-list>