CODEWITHSUNDEEP
ionic2ionic3
Junaid S.
Junaid S.

Reputation: 2642

Ionic 2 - Text overflow

I am adding text dynamically to the page

Html

<ion-item no-lines>
  <div [innerHTML] = "response"></div>
</ion-item>

TS

this.response = "<h3 style=\"border-bottom: 1px solid #dedede;\">" + result.Response + "</h3>" + this.response; // Adding the response in new line

Result

enter image description here

Problem

1) Text is not (automatically) wrapping to next line. (See the yellow line, text is hidden)

2) What ever style I add in innerHtml, it is not added in the page while displaying.

How to set text-overflow/word-wrap property to solve the problem ?

P.S. I am using ionic 2 and currently testing on Chrome.

Upvotes: 3

Views: 2893

Answers (2)

Chirag Patel
Chirag Patel

Reputation: 373

Just add item-text-wrap class to item.

<ion-item class="item-text-wrap">
    <div [innerHTML] = "response"></div>
</ion-item>

or
in this case, try to add the "white-space: normal;" property to ion-item. By default the white-space is nowrap and that is why you see the text in ellipsis ("...")

Upvotes: 1

Vanojx1
Vanojx1

Reputation: 5574

Add text-wrap to the ionic item

<ion-item text-wrap no-lines>
  <div [innerHTML] = "response"></div>
</ion-item>

Upvotes: 4

Related Questions