Wrap text in Button stack?

Hi - I want to use some long labels in the Button stack. Is there a way to make the text auto-wrap? Adding overflow-wrap to the css doesn’t seem to work and manually inserting a
line break isn’t responsive. Any suggestions?

@nicksmith I don’t think it’s possible (had the same issue one time).

You can use the Margins Stack, give that stack a border of 1 pt/rounded 4 pts and set the stack padding (at the bottom of the inspector) to 8pts.

Screen Shot 2021-05-25 at 11.05.00

Inside Margins Stack, place a Paragraph Stack and remove the base margin. You can link your text, or parts of it.

The color and style of the linked text can be set in the Foundry Control Center.

Can this solve your problem?

Personally I would not suggest this. Buttons purposefully don’t wrap text. Buttons should have as succinct a label as possible.

Or maybe use the full width Button setting so it fills the container?

Thanks Rob - but changing the fill mode settings doesn’t make any difference. The buttons are also set to Block - but again changing this doesn’t alter the fact that the text won’t wrap.

Hi - well it’s something I need to do so I will have to insert manual returns and a different button for each break point. Popover in Potion might have been a way to deal with the longer text - but there’s no facility to add a link to this.

Cracked it - I added white-space: normal !important; to the custom css class and the text wraps perfectly

I’d advise once more just for posterity sake that I would suggest against changing the way text wrapping works in buttons.

1 Like