Breaking up a long email address with <wbr> or &#8203;

I have a long email address that breaks out of the column. I want to make it wrap so it’s responsive.

I can do word-break: break-all; but that looks like a bit of a mess. I would like it to break/wrap just before the @symbol.

This article talks about adding < wbr > or ‘​’ how can I add that in to a link in Bootstrap studio?

Assuming you’re putting the email address inside a link, you would add your link component, then add two span components inside the link. Make the first span the email address name, and the second span the

Then select the first span, go to the Options panel, and turn Text Break on.

The email address will break just before the @ symbol, as shown in the image below.

(NOTE: it’s not good practice to have visible, plain text email addresses on your website, as it will encourage spam.)