In web apps, there are often places where I display email addresses in a table column, and every time there is a long email address, it stretches the column and messes up the table width or column balance.
The current solution to this problem that I am using is to insert the <wbr/> tag to encourage the email to break cleanly at the midpoint when it is too wide. So a chunk of html like
user<wbr/>@domain.com
will render as
user@domain.com
when there is space and
user
@domain.com
when there is not.
This is the display behaviour I want, but it is an unsatisfactory solution, because when I select and copy an email from the page, the embedded break is captured too, as an invisible control character, and corrupts the email address for pasting into other fields.
It seems there should be some directive in CSS that allows extra characters to be identified as preferable for word breaking on, in addition to the standard space and hyphen break characters.
This would create the same wrapping behaviour without needing to change the actual content by inserting the tag.
But I can't seem to find anything like this. What possible solutions are there?
