如何在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;不能工作。

問題
是否可以顯示多行內容？

來源

2016-10-03 Mengxi Wang

尋求代碼幫助的問題必須包含在問題本身**中重現它所需的最短代碼**最好在[** Stack Snippet **]（https://blog.stackoverflow.com/2014/09 /引入可運行的JavaScript-CSS-和HTML的代碼段/）。請參閱[**如何創建最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

因爲您使用類來編輯文本。所以它不工作。在離子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>

歡呼！

來源

2016-10-03 15:44:05 johnny

如果您在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>

來源

2016-10-04 10:45:05 sebaferreras

如何在ionic2中創建文本包裝？

回答

相關問題