Wie mache ich Textumbruch in ionic2?

Ich benutze Ionic2 um eine App zu erstellen.Wie mache ich Textumbruch in ionic2?

Ich muss eine Liste von Salat anzeigen. Ich habe <ion-list> und <ion-item> verwendet, um es zu bauen. Das Problem ist, dass die Artikel nur in einer Zeile angezeigt werden können.
in der folgenden Abbildung dargestellt:

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

Die CSS

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

Es scheint, beide Code class='item item-text-wrap' und CSS text-align: justify; kann nicht funktionieren.

DIE FRAGE
Ist es möglich, Inhalte in mehreren Linien Dispaly?

Quelle

2016-10-03 Mengxi Wang

Fragen Code Hilfe suchen müssen den kürzesten Code enthalten notwendig, es zu reproduzieren ** in der Frage selbst ** vorzugsweise in einem [** Stapel Snippet **] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-und-html-code-snippets /). Siehe [** So erstellen Sie ein minimales, vollständiges und überprüfbares Beispiel **] (http://stackoverflow.com/help/mcve) –

Da Sie Klasse zum Bearbeiten von Text verwenden. Es funktioniert also nicht. In Ionic 2 wird das Attribut "text-wrap" innerhalb des ion-item-Tags verwendet.

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

Prost!

Quelle

2016-10-03 15:44:05 johnny

Wenn Sie text-wrap (als Attribut, nicht als Klasse) in ion-list setzen, wird für alle Elemente in dieser Liste der Text-Wrap-Effekt angewendet. Auf diese Weise müssen Sie die Text-Wrap-Direktive nicht in alle Elemente einfügen und Ihre App leicht optimieren.

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

Quelle

2016-10-04 10:45:05 sebaferreras

Wie mache ich Textumbruch in ionic2?

Antwort

Verwandte Themen