1

I have a friend with a very long email address. They wish to display this address on their site, but on mobile devices it breaks their layout it overflows the page width.

I tried inserting a zero-width space and this helped with the layout problem, but it means that users cannot copy and paste the address into an email client.

While it's true that that problem could be solve by making the text a mailto: link, it did get me wondering:

Is there a way to direct a browser to optionally break on certain characters without having to insert non-printable characters that could cause copy-and-paste issues?

Dancrumb
  • 26,597
  • 10
  • 74
  • 130
  • 1
    There is `word-break:break-all`. But I guess you know that. Also it is — not — on certain characters. But on any. – deEr. Apr 17 '18 at 14:31
  • @AjAX. I had actually forgotten that one. While you're correct that it's not quite what I was asking for, thanks for the reminder! – Dancrumb Apr 17 '18 at 15:18

1 Answers1

7

You do this with a strategically placed <wbr> element:

really.really.long@<wbr>email.address

It behaves identically to <br>, except that a line break will only be inserted when the email address cannot fit on one line. Like <br>, said line break is completely cosmetic (i.e. does not result in a non-printable character).

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356