Scale text to fit into button

ionic-v1
1

Hello, everybody. I’m trying to make a long text to be showing despite phone resolution and not cutting it off like the image below. I’ve tried making it bigger using ionic button-large or button-bar class and other methods from the Ionic docs, but none of them makes the contend take the full width of the button. My overall idea is to be equally grid positioned buttons with text displayed in full width. Just to mention this only happens (cutting the text off) on devices below around 600 Width and in landscape this doesn’t happen.

Cutting text off

image
happend.PNG301×523 13 KB

Doesn’t cut it off

image
does not.PNG770×448 18.4 KB

2

Hello @TheTed have you tried something like FitText?

Otherwise, you would need to write custom css based on media queries that detect page width. At smaller page widths you would have to set font-size of the button text smaller.

1 Like
3

Fantastic @macfam. Thank you so much, man :slight_smile: . It fit my needs exactly like it is made for me and it will come handy for other projects.

4

instead of using javascript or jquery plugins try using pure css:

take a look at the viewport sizing