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

Question

I have a form that displays a table containing email addresses, and I would like to hint to the browser that the email address can wrap the line to @ ; ex, so [e-mail] will be migrated to somelongemail<break>@somelargedomain.com .

The “standard” solution seems to represent zero-width space , but this will cause problems if someone tries to copy + paste the email address (i.e. because they will paste the email address example<zero-width-space>@example.com , which is not a reasonable email address).

How can I make hints for word wrapping without breaking copy and paste?

For instance:

 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> [e-mail] </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> . It has decent support , minus IE, of course.

Edit: Added a possible IE fix that 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> [e-mail] </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> 

Answer 2

How to break a string in JavaScript?

I think this will help. Use regex to insert char before @.

Edit:

For this you need javascript. You can break the line by placing the %0A character before @ and adding a listener for the copy event so that you can manipulate the clipboard and delete the character.