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

Question

我试图在div中包装一个电子邮件地址,否则它会溢出因为它对于div的宽度来说太长了.

我知道此问题已经在此处讨论过(例如这个问题),但是请继续阅读,因为我涵盖了那里和其他地方提到的所有可能的解决方案.

以下解决方案都没有完全符合我的要求:

1. CSS

   "word-wrap: break-word".
   

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

   info@longemailaddress.co.u

   ķ

2. 在HTML中使用Soft Hyphen:

   ­
   

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

   信息@长

   emailaddress.co.uk

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

     (thinspace)
   ​ (zero-width space)
   

   这两个插入额外的字符(如果用户复制粘贴,则更糟糕)

4. Linebreaks ......

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