我试图在div中包装一个电子邮件地址,否则会溢出因为它对于div的宽度来说太长了.
我知道此问题已在此处介绍过(例如this question),但请继续阅读,因为我涵盖了那里和其他地方提到的所有可能的解决方案.
以下解决方案都没有完全符合我的要求:
> CSS
"word-wrap: break-word".
根据div的宽度,这会破坏尴尬地方的电子邮件地址.例如
info@longemailaddress.co.u
k
>在HTML中使用Soft Hyphen:
­
这确实得到了很好的支持,但在页面上呈现了一个可见的连字符,导致用户认为该电子邮件地址中有一个连字符:
info@long-
emailaddress.co.uk
>在电子邮件地址中使用thinspace或零宽度空间:
  (thinspace) ​ (zero-width space)
这两个插入额外的字符(如果用户复制粘贴,则更糟糕)
> Linebreaks ……
<br />
…因为,大多数情况下,div足够大,可以在一行中包含电子邮件地址.
我想我希望在HTML / CSS中做一些巧妙的方法,也许是利用伪元素(例如:在/之后),或者使用软连字符,但不知何故以某种巧妙的方式将其隐藏在CSS中.
我的网站使用jquery,所以如果我必须的话,我会求助于它,尽管我不想仅为这个小问题包含一个完整的连字库!
请在明信片上的答案. (或者,理想情况下……)
解决方法
您可以剪辑文本并使用工具提示
width: 100px; overflow: hidden; text-overflow: ellipsis;
我做的是悬停时将全文显示为工具提示或使用工具提示的title属性.
<p class="email" title="long-email-address@mail.com">...</p>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。