Full user text - don't truncate


#1

My app alows the user to take notes and saves them. Since the length can be arbitraty, what html tag should I use to make sure the whole text is displayed, preferably with automated linebreaks and not truncated as I have it right now.

<ion-item>
          <ion-grid>
            <ion-row>
              <ion-col width-100><b>Your notes</b></ion-col>
            </ion-row>
            <ion-row>
              <ion-col width-100>{{userNotes}}</ion-col>
            </ion-row>
          </ion-grid>
        </ion-item>

#2

It is the CSS within the that is causing that issue. I would suggest a different set of tags to build your UI with.


#3

try adding class="item-text-wrap" to your element


#4

Not sure about the ion-grid within the ion-item, but I would guess that it’s the ion-item element that is truncating your text. You should be able to disable by adding the text-wrap attribute:
<ion-item text-wrap>

</ion-item>