CODEWITHSUNDEEP
ionic-frameworkionic5ionic6
Mata
Mata

Reputation: 473

how to create an ionic-button with multi line text ,wrapped text in ionic v6/v5

I had a problem creating an ionic-button with multi-line text in ionic v6/v5, the problem was that the whole text was appearing in one line and part of the text was not shown. like the example in the stackblitz

 <ion-button expand="block" size="large">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</ion-button>

Upvotes: 1

Views: 2180

Answers (1)

Mata
Mata

Reputation: 473

so basically the fix was adding the class ion-text-wrap, that goes as below ,from documentation:

<ion-button class="ion-text-wrap" expand="block">__LONG_TEXT__</ion-button>

this would increase the height of the button and make the button wrap around the text. I did not find that in the documentation while searching explicitly in that wording. The example also added in the stackblitz

Upvotes: 6

Related Questions