Full user text - don't truncate

Ionic Framework ionic-v3
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

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