如何在不破坏复制+粘贴的情况下建议 HTML 文本中的换行符？

Question

我有一个显示包含电子邮件地址的表格的表单，我想向浏览器提示电子邮件地址可以在@ 之前换行；例如，所以somelongemail@somelargedomain.com 将换行到somelongemail<break>@somelargedomain.com。

“标准”解决方案似乎引入了zero width space，但如果有人试图复制+粘贴电子邮件地址，这将导致问题（即，因为他们将粘贴电子邮件example<zero-width-space>@example.com，这不是合理的电子邮件）。

如何在不破坏复制+粘贴的情况下制作自动换行提示？

例如：

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>

Answer 1

您可以使用<wbr> 标签。它自然有decent support，减去IE。

编辑：添加了可能的 IE 修复，它适用于 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>

Answer 2

How to break line in JavaScript?

我想这会有所帮助。使用正则表达式在 @ 之前插入字符。

编辑：

为此，您需要 javascript。您可以通过在 @ 之前放置一个 %0A 字符来换行，并为复制事件添加一个侦听器，以便您可以操作剪贴板并删除该字符。