ionic2でテキストを折り返す方法は？

Question

私はIonic2を使ってアプリケーションを構築しています。

サラダのリストを表示する必要があります。私はそれを構築するために<ion-list>と<ion-item>を使用しました。問題はアイテムが1行にしか表示できないことです。次の図に示す
：CODE

<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

テキストを編集するためにクラスを使用するためです。だからうまくいかない。イオン2では、イオンアイテムタグ内に属性「テキストラップ」を使用しています。

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

Cheer！

Answer 2

ion-listにtext-wrap（属性としてではなく属性として）を入力すると、そのリストのすべての項目にテキストラップエフェクトが適用されます。こうすることで、すべてのアイテムにtext-wrapディレクティブを置く必要がなくなり、アプリをわずかに最適化することができます。