如何在HTML / CSS中隐藏软连字符（­）

Question

我正在尝试在一个div中自动换行电子邮件地址，否则这个地址会因为太长而溢出div的宽度。

我知道这个问题之前已经讨论过（例如这个问题），但是请继续阅读，因为我会涵盖所有可能的解决方案。

以下解决方案都不完全符合我的要求：

1. CSS

   "word-wrap: break-word".
   

   根据div的宽度，这会在不合适的位置中断email地址，例如：

   [e-mail].u

   k

2. 在HTML中使用软连字号（Soft Hyphen）：

   ­
   

   这种方法得到了很好的支持，但会在页面上呈现出一个可见的连字符，导致用户认为电子邮件地址中有一个连字符：

   info@long-

   emailaddress.co.uk

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

  (thinspace)
​ (zero-width space)

4. 这两个选项都会插入额外的字符（如果用户复制粘贴，可能会很麻烦）

5. 换行符...

<br />

一般情况下，由于大部分时间div足够大，可以在一行中容纳电子邮件地址，因此这些方法都不适用。

我希望能在HTML/CSS中找到一种巧妙的方法来解决这个问题，也许可以利用伪元素（如:before / :after），或者使用软连字符并以某种聪明的方式将其隐藏起来。

我的网站使用jquery，所以如果必须的话，我会使用它，尽管我不想为了这个小问题而包含整个断词库！

请在明信片上回答。（或者最好在这里回答...）

- hazymat

Answer 1

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

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

我的做法是当鼠标悬浮时，展示完整文本作为工具提示或使用title属性作为工具提示。

<p class="email" title="[e-mail]">...</p>

- Robin Maben

---

虽然我没有意识到，但这正是我正在寻找的。谢谢！ - hazymat

如果溢出被隐藏了，那么盲人使用的屏幕阅读器如何呈现地址？（对他们来说，“title”属性是无用的。） - Tsundoku

Answer 2

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

- Simon Arnold

---

已经很久以前就去世了。 - chovy

@chovy 这个答案是来自2012年的。 - Simon Arnold

Answer 3

word-wrap:break-word 基于您要在其中断开单词的容器的宽度。它不会在您决定的位置中断开单词。除非您想减小 div 的宽度以使其在您想要的位置中断开。

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

我并不是有意冒犯，但也许重新考虑设计而不是绕过设计会更好？Robin的答案是一个不错的替代方案，但您将无法在没有 JavaScript 的情况下选择电子邮件地址。

- Brendan

---

同意。（尽管我认为在jQuery中使用带有连字符/特殊字符的span并使用CSS将其隐藏是可能的。无论哪种方式都是可怕的想法。）Robin上面的解决方案非常适合我的需求，我可能应该提到我不关心用户是否可以复制粘贴电子邮件地址，重点是我不想让他们试图复制粘贴，然后想知道为什么电子邮件没有发送。（每封电子邮件都是一次查询，每次联系失败都会损失业务！）所以Robin的解决方案很好，因为它是一个视觉指示器，表明整个电子邮件地址是不可复制的。 - hazymat

Answer 4

你可以使用hyphenate-character CSS属性来更改连字符字符。

在这种情况下，只需将其设置为空字符串即可。

hyphenate-character: '';

现在你可以使用­软换行了。

.narrow {
  width: 120px;
  hyphenate-character: '';
}

<div class="narrow">
postmaster@&shy;Llanfairpwllgwyngyll.&shy;cymru
</div>

- ivarni

---

复制和粘贴时，软连字符会包含在粘贴的内容中（即使在浏览器中隐藏）。:( - undefined