10

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

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

以下解决方案都不能完全满足我的要求：

  1. CSS

    "word-wrap: break-word".

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

    info@longemailaddress.co.u

    ķ

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

    ­

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

    信息@long-

    emailaddress.co.uk

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

      (thinspace)
​ (zero-width space)

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

  4. 换行符...

    <br />

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

我想我希望在 HTML/CSS 中有一些巧妙的方法来做到这一点，也许使用伪元素（例如：before / :after），或者使用软连字符但以某种巧妙的方式用 CSS 隐藏它。

我的网站使用 jquery，所以如果必须的话，我会求助于它，尽管我宁愿不包含一个完整的连字符库，只是为了这个小问题！

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

4

3 回答 3

6

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

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

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

<p class="email" title="long-email-address@mail.com">...</p>
于 2012-08-21T13:39:22.957 回答
4

也许您可以尝试<wbr>代替<br>
不幸的是，这在 IE 中不起作用。

于 2012-08-21T13:42:56.810 回答
1

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

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

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

于 2012-08-21T13:43:22.627 回答