Question

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

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

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

例如：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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?

我想这会有所帮助。使用正则表达式在@。

之前插入char

编辑：

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

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

2 个答案: