如何在 HTML / CSS 中隐藏软连字符 ()

Question

我正在尝试在 div 中自动换行电子邮件地址，否则它会溢出，因为它对于 div 的宽度来说太长了。

我知道这个问题之前已经在这里讨论过（例如this question），但请继续阅读，因为我涵盖了那里和其他地方提到的所有可能的解决方案。

以下解决方案都不完全符合我的要求：

1. CSS

   "word-wrap: break-word".
   

   根据 div 的宽度，这会在尴尬的地方破坏电子邮件地址。例如

   info@longemailaddress.co.u

   k

2. 在 HTML 中使用 软连字符：

   ­
   

   这确实得到了很好的支持，但会在页面上呈现一个可见的连字符，导致用户相信电子邮件地址中有一个连字符：

   info@long-

   emailaddress.co.uk

3. 在电子邮件地址中使用 thinspace 或 零宽度空格：

     (thinspace)
   ​ (zero-width space)
   

   这两个都插入了额外的字符（如果用户复制粘贴会很糟糕）

4. 换行符...

   <br />
   

   ... 没有了，因为大多数时候，div 足够大，可以在一行中包含电子邮件地址。

我想我希望在 HTML/CSS 中有一些巧妙的方法来做到这一点，也许利用伪元素（例如：之前 / ：之后），或者通过使用软连字符但不知何故用 CSS 隐藏它聪明的方法。

我的网站使用 jquery，所以如果必须的话，我会求助于它，尽管我不想仅仅为了这个小问题而包含一个完整的断字库！

请在明信片上回答。 （或者，理想情况下在这里......）

Answer 1

您可以剪切文本并使用工具提示

   width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;

我所做的是在悬停时将全文显示为工具提示或使用title 属性作为工具提示。

<p class="email" title="long-email-address@mail.com">...</p>

Answer 2

也许你可以试试<wbr> 而不是<br>
不幸的是，这在 IE 中不起作用。

Answer 3

word-wrap:break-word 是基于你想要插入单词的容器的宽度。它不会在你决定的地方打破它。不幸的是，除非您想减小 div 的宽度以便它在您想要的位置中断。

正如您所发现的，其他解决方案不足以满足您的需求。此外，使用“jQuery 连字符库”可能也无法解决您的问题，因为它只会像您尝试的那样注入字符、换行符等。你最终会遇到同样的问题。

我并没有任何冒犯的意思，但也许重新考虑设计而不是围绕设计工作会更好？ Robin 的回答是一个不错的选择，尽管您将无法在没有 javascript 的情况下选择电子邮件地址。