Where do you break long contact details that run over one line?

Question

For example an email address for one area of the company is something like "[email protected]"

Though we can do many alternatives (links, forms etc.) so you don't see this long contact, we've found that people want to know where it's going.

The longer contact address proves a challenge on mobile and in different components of the page.

1. Where's a good breakpoint for email?

2. What's an alternative approach when you have to display a really long single word?

Answer 1

For web, good breakpoint is the container's borders. E-mail should be truncated and ellipsis should be shown. If you want to provide more visibility, provide tooltip to this truncated text when hovered. If you want people to copy it, provide 'Copy' button when email is hovered.

For mobile, provide same method but this time it's good to make email actionable. So you can set options like: Copy, send mail, etc.