5

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 somelongemail@somelargedomain.com 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>somelongemail@domain.com</td></tr>
</table>

<table>
  <tr><td>with a zero-width space</td><td>somelongemail&#8203;@domain.com</td></tr>
</table>
David Wolever
  • 148,955
  • 89
  • 346
  • 502
  • Copying your second option gave me the perfectly reasonable "somelongemail​@domain.com", which my email provider reads just fine. – Phire Jul 30 '15 at 19:53
  • Alas, that's the difficulty with the zero width space: you can't see it, but it's there. Copying the `mail​@domain` portion then using `pbpaste | od -a` to get a hex dump, at least my machine yields: `m a i l ? 80 8b @ d o m a i n` (note the `? 80 8b`). – David Wolever Jul 30 '15 at 20:01

2 Answers2

4

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>somelongemail@domain.com</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>
Jacob
  • 2,212
  • 1
  • 12
  • 18
-1

How to break line in JavaScript?

I guess this would help. Use a regex to insert the char before the @.

Edit:

You need javascript for this. You could break the line by placing a %0A character before the @ and add a listener for the copy event so you can manipulate the clipboard and remove the character.

Community
  • 1
  • 1
Onilol
  • 1,315
  • 16
  • 41
  • That seems like it will have the same copy+paste problem… no? – David Wolever Jul 30 '15 at 19:59
  • Have you tried it yet ? You could also try this http://stackoverflow.com/questions/24488950/css-to-break-a-line-only-on-a-certain-character – Onilol Jul 30 '15 at 20:13
  • Yep, and the line break is copied along with the rest of the text. – David Wolever Jul 30 '15 at 20:17
  • After a brief search I'm quite sure this is what you are looking for : http://stackoverflow.com/questions/2026335/how-to-add-extra-info-to-copied-web-text – Onilol Jul 30 '15 at 20:20
  • I hate to be so contradictory, but that seems to be exactly the opposite of what I'm looking for? ie, if a zero-width space (or other character) is present in the page, I *don't* want it to be present in the copy'd text. – David Wolever Jul 30 '15 at 20:35
  • You didn't understand me , brother. That link is so you know how to remove it from the clipboard so the user does NOT copy it. You have to insert it for display and then remove it for copying. Got it ? I can write you an example 4 hours from now. – Onilol Jul 30 '15 at 21:21