将长电子邮件地址包装在小盒子中答案

【问题标题】：Wrapping long email addresses in small boxes将长电子邮件地址包装在小盒子中
【发布时间】：2014-05-21 07:30:09
【问题描述】：

我有一个宽度为 118 像素的框，其中包含一个电子邮件地址。我使用word-wrap: break-word; 更好地包装地址。但是在一种特殊的地址上，这会使情况变得更糟。

big.ass.email@addre
ss-
is.extremely.lame.de

由于word-wrap: break-word; 它在“addre”之后中断，但由于该地址的其余部分不适合一行，它在恰好是“-”的“首选断点”处再次中断。在期望的行为中，电子邮件地址中的第二次中断不是在“-”之后，而是在“非常”之后。我担心仅使用 CSS 是不可能的。不是吗？

这里可以看一个小例子：http://jsfiddle.net/sbg8G/2/

【问题讨论】：

这是very common question on stackoverflow
@misterManSam 不，不是。我不想在文本到达框的末尾时简单地换行。我已经用word-wrap: break-word; 做到了。我想“重置”“首选断点”，例如“-, ?, !, &, ...”，仅当文本到达框的末尾时才换行！
看这个jsfiddle.net/sbg8G/13

【解决方案1】：

您最好的选择是使用<WBR> 标签或&#8203; 字符在您希望的任何地方引入软中断。例如：

HTML：

...
<a href="big.ass.email@address-is.extremely.lame.de">
    big.ass.email@&#8203;address-is&#8203;.extremely.lame.de
</a>
...

这里，&#8203; 插入在“@”之后和“-is”之后，以在这些点处造成中断。

重要提示：word-wrap 和 word-break 在这里帮不了你。

原因：

word-break 用于 CJK（中文、日文、韩文）文本。 (Reference)。其主要目的是防止 CJK 文本出现断字。休息正常。
word-wrap 用于指定浏览器是否可以在单词中换行以防止溢出。就是这样。 (Reference) 主要需要注意的是 "..通常牢不可破的单词可能会在任意点被破坏.."。任意点并不能给您太多控制权，是吗？

硬连字符有助于指示断点。您的电子邮件地址中有一个连字符，这暗示了在那里断字。

注意：

更好的选择是让 CSS3 为我们做这件事。 word-wrap 和 word-break 不允许控制断点。 hyphens 确实如此，但不幸的是 hyphens 仍然“是一项实验性技术”。

hyphens 应该能够做到这一点：

hyphenate-limit-lines
hyphenate-limit-zone
hyphenate-character
hyphenate-limit-before

但是，这目前不能正常工作。否则，&shy; 会帮助您。

注2：

hyphens，会添加一个“硬连字符”(-)，这会在您的情况下导致意外结果（电子邮件地址会更改）。

学分：here、here 和 here

【讨论】：

也可以在 Wordpress 中完美运行。它可以完全控制您想要换行的位置。
超级，wbr 工作正常，对我来说似乎是一个很好的解决方案。就我而言，我一直在处理电子邮件，并要求在 @ 或 .com 上进行软中断。所以，wbr 可以很好地解决这个问题。非常感谢。
这种行为似乎会给希望能够复制粘贴电子邮件地址但不知道要获取它们的不可见空白的用户带来问题。
@Christian：不是真的。 wbr 是 MDN、HTML5 spec 和 living standard 为电子邮件和 URL 引入休息机会的推荐方式。它的行为类似于零宽度空间，但不会对复制粘贴或点击场景产生不利影响。
@Abhitalks ：您提供了一个演示链接。测试它并在演示链接中复制粘贴内容很容易。如果你复制粘贴它，你会在复制粘贴的内容中得到一个零宽度的空间。你得到big.ass.email@address-is.extremely.lame.de，其中有两个零空格字符。您不会收到big.ass.email@address-is.extremely.lame.de，并且用户可能不会注意到差异，因为空格是不可见的，并且当他的邮件程序根据零空格字符做出反应时会遇到问题。

【解决方案2】：

您可以尝试使用 text-overflow:ellipsis;

overflow:hidden;
text-overflow:ellipsis;

【讨论】：

【解决方案3】：

您好，我有一个类似的问题，我解决了它：

  overflow-wrap: break-word;
  word-wrap: break-word;

【讨论】：