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

Question

我有一个宽度为 118px 的盒子，其中包含一个电子邮件地址。我使用

word-wrap: break-word;

来更好地包装地址。但在特殊类型的地址上，情况会变得更糟。

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

因为

word-wrap: break-word;

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

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

Answer 1

这里最好的选择是使用

<WBR>

标签或

&#8203;

字符在您希望的任何地方引入软中断。例如：

HTML：

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

此处，

&#8203;

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

重要：

word-wrap

和

word-break

在这里不会为您提供帮助。

原因：

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

硬连字符有助于指示断点。您的电子邮件地址中有一个连字符，这会提示您在此处中断单词。

注意：

更好的选择是让 CSS3 为我们做这件事。

word-wrap

和

word-break

不允许控制断点。

hyphens

确实如此，但是，不幸的是

hyphens

仍然“是一项实验性技术”。

hyphens

应该能够做到这一点：

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

但是，目前这并不能正常工作。否则，

&shy;

会帮助你。

注2：

hyphens

，会添加一个“硬连字符”(-)，这会导致您的情况出现意想不到的结果（电子邮件地址会改变）。

Answer 2

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

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

Answer 3

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

overflow:hidden;
text-overflow:ellipsis;

Answer 4

您只需要这些样式

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

，您的工作就完成了。

<div style="overflow: hidden; overflow-wrap: break-word;max-width:160px;">
  [email protected]
</div>

同样适用于没有空格的长文本（单个单词）。