如何在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>