1

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>
Masoud Tahmasebi
  • 423
  • 6
  • 22

1 Answers1

4

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

Masoud Tahmasebi
  • 423
  • 6
  • 22