How can I suggest line breaks in HTML text without breaking copy+paste?

Question

I've got a form which displays a table containing email addresses, and I would like to hint to the browser that the email address can line wrap before the @; ex, so [email protected] will wrap to somelongemail<break>@somelargedomain.com.

The "standard" solution seems to be introducing a zero width space, but this will cause problems if someone tries to copy+paste the email address (ie, because they will paste the email example<zero-width-space>@example.com, which isn't a sensible email).

How can I make make word wrap hints without breaking copy+paste?

For example:

table {
  border: 1px solid grey;
  width: 50px;
  margin-bottom: 10px;
  border-spacing: 0;
  border-collapse: collapse;
}

td {
  border: 1px solid grey;
}

<table>
  <tr><td>without any break hints</td><td>[email protected]</td></tr>
</table>

<table>
  <tr><td>with a zero-width space</td><td>somelongemail&#8203;@domain.com</td></tr>
</table>

Answer 1

You can use the <wbr> tag. It has decent support, minus IE, naturally.

Edit: Added possible IE fix, which works for me in IE9+.

table {
  border: 1px solid grey;
  width: 50px;
  margin-bottom: 10px;
  border-spacing: 0;
  border-collapse: collapse;
}

td {
  border: 1px solid grey;
}

table:last-of-type {background-color: green; color: #FFF;}

/* possible IE fix? */
wbr:after {
    content:"";
    display: block;
}

<table>
  <tr><td>without any break hints</td><td>[email protected]</td></tr>
</table>

<table>
  <tr><td>with a zero-width space</td><td>somelongemail&#8203;@domain.com</td></tr>
</table>

<table>
  <tr><td>using the &lt;wbr&gt; tag</td><td>somelongemail<wbr>@domain.com</td></tr>
</table>