在小方框中包装长电子邮件地址

Question

我有一个宽度为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/

Answer 1

这里最好的选择是使用<WBR>标签或角色在任何地方引入软休息.例如:

HTML:

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

在这里,插入"@"之后和"-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

但是,这目前不适用.否则,一个人会帮助你.

注2:

hyphens,会添加一个"硬连字符"( - ),这将导致您的情况出现意外结果(电子邮件地址将更改).

Answer 2

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

overflow:hidden;
text-overflow:ellipsis;