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

Posted 2023-02-24

【中文标题】如何在 HTML / CSS 中隐藏软连字符 ()

【英文标题】：How to hide a soft hyphen (­) in HTML / CSS

【发布时间】：2012-08-21 13:26:37

【问题描述】：

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

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

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

CSS

"word-wrap: break-word".

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

[e-mail].u

k

在 html 中使用 软连字符：

­

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

info@long-

emailaddress.co.uk

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

  (thinspace)
​ (zero-width space)

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

换行符...

<br />

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

我想我希望在 HTML/CSS 中有一些巧妙的方法来做到这一点，也许利用伪元素（例如：之前 / ：之后），或者通过使用软连字符但不知何故用 CSS 隐藏它聪明的方法。

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

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

【参考方案1】：

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

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

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

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

【讨论】：

虽然我没有意识到这一点，但这正是我想要的。谢谢！

如果溢出被隐藏，盲人使用的屏幕阅读器如何渲染地址？ （title 属性对他们来说毫无用处。）

【参考方案2】：

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

【参考方案3】：

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

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

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

【讨论】：

同意。 （虽然，我认为在 jQuery 中可以使用带有连字符/特殊字符的跨度，使用 CSS 隐藏。无论哪种方式 - 可怕的想法。）上面罗宾的解决方案非常适合我的需求，我可能应该提到我没有't care 如果用户不能复制粘贴电子邮件地址，关键是我不想让他们尝试，以为他们可以，然后想知道为什么电子邮件没有发送。 （每封电子邮件都是一个询问，每一次尝试联系失败都会失去生意！）所以 Robin 的解决方案很好，因为它是整个电子邮件地址不可复制的视觉指示。