html - 如何在 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 或zero-width space:

     (thinspace)
   ​ (zero-width space)
   

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

4. 换行符...

   <br />
   

   ...因为在大多数情况下，div 足够大，可以在一行中包含电子邮件地址。

我想我希望在 HTML/CSS 中有一些巧妙的方法来做到这一点，也许使用伪元素(例如:之前/:之后)，或者通过使用软连字符但以某种方式将其隐藏在某些聪明的方式。

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

请将答案写在明信片上。 (或者，理想情况下在这里...)

Answer 1

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

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

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

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