我正在尝试在一个div中自动换行电子邮件地址,否则这个地址会因为太长而溢出div的宽度。
我知道这个问题之前已经讨论过(例如这个问题),但是请继续阅读,因为我会涵盖所有可能的解决方案。
以下解决方案都不完全符合我的要求:
CSS
"word-wrap: break-word".
根据div的宽度,这会在不合适的位置中断email地址,例如:
info@longemailaddress.co.u
k
在HTML中使用软连字号(Soft Hyphen):
­
这种方法得到了很好的支持,但会在页面上呈现出一个可见的连字符,导致用户认为电子邮件地址中有一个连字符:
info@long-
emailaddress.co.uk
在电子邮件地址中使用细空格或零宽度空格:
这两个选项都会插入额外的字符(如果用户复制粘贴,可能会很麻烦)
换行符...
  (thinspace)
​ (zero-width space)
<br />
一般情况下,由于大部分时间div足够大,可以在一行中容纳电子邮件地址,因此这些方法都不适用。
我希望能在HTML/CSS中找到一种巧妙的方法来解决这个问题,也许可以利用伪元素(如:before / :after),或者使用软连字符并以某种聪明的方式将其隐藏起来。
我的网站使用jquery,所以如果必须的话,我会使用它,尽管我不想为了这个小问题而包含整个断词库!
请在明信片上回答。(或者最好在这里回答...)