我试图在div中包装一个电子邮件地址，否则会溢出因为它对于div的宽度来说太长了。
我知道此问题已经在此处讨论过（例如this question），但请继续阅读，因为我涵盖了那里和其他地方提到的所有可能的解决方案。
以下解决方案都没有完全符合我的要求：
CSS
"word-wrap: break-word".
根据div的宽度，这会破坏尴尬地方的电子邮件地址。 e.g。
info@longemailaddress.co.u
ķ
在HTML中使用 Soft Hyphen ：
­
这确实得到了很好的支持，但在页面上呈现了一个可见的连字符，导致用户相信该电子邮件地址中有一个连字符：
信息@长 -
emailaddress.co.uk
在电子邮件地址中使用 thinspace 或零宽度空间：
  (thinspace)
​ (zero-width space)
这两个插入额外字符（如果用户复制粘贴，则为无聊）
LINEBREAKS ...
<br />
...因为，大多数情况下，div足够大，可以在一行中包含电子邮件地址。
我想我希望有一些巧妙的方法可以在HTML / CSS中执行此操作，也许可以使用伪元素（例如：在/之后），或者使用软连字符，但不知何故用CSS隐藏它聪明的方式。
我的网站使用jquery，所以如果必须的话，我会求助于此，尽管我不想仅为这个小问题包含一个完整的连字库！
请在明信片上回答。 （或者，理想情况下......）
答案 0 :(得分：6)
您可以剪辑文本并使用工具提示
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
我所做的是悬停时将全文显示为工具提示，或使用工具提示的title属性。
<p class="email" title="long-email-address@mail.com">...</p>
答案 1 :(得分：4)
也许您可以尝试<wbr>而不是<br>
不幸的是，这在IE中不起作用。
答案 2 :(得分：1)
word-wrap:break-word基于您想要破解单词的容器的宽度。它不会在您决定的位置打破它。不幸的是，除非你想减小div的宽度以使它在你想要的地方打破，否则你运气不好。
正如您所发现的，其他解决方案不足以满足您的需求。此外，使用“jQuery连字库”可能无法解决您的问题，因为它只会像您尝试的那样注入字符，换行符等。你最终遇到了同样的问题。
我并不是说这有任何冒犯，但也许重新考虑设计是好的，而不是围绕设计工作？ Robin的答案是一个不错的选择，但如果没有javascript，你将无法选择电子邮件地址。