如何在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中创建文本包装？

回答

相关问题