我有一个宽度为118像素的盒子，其中包含一个电子邮件地址。我使用word-wrap: break-word;来更好地包装地址。但是在一种特殊的地址上，这会让情况变得更糟。
big.ass.email@addre
ss-
is.extremely.lame.de
由于word-wrap: break-word;它会在＃34; addre＆＃34;之后中断。但是由于地址的其余部分不适合一行，它会在一个优先断点处再次断开＆＃34;恰好是＆＃34; - ＆＃34;。在期望的行为中，电子邮件地址中的第二个中断不会在＆＃34; - ＆＃34;之后。但是＆＃34;极其＆＃34;。我担心只用CSS就不可能。不是吗？
在这里，您可以看到一个小例子：http://jsfiddle.net/sbg8G/2/
答案 0 :(得分：25)
这里最好的选择是使用<WBR>标记或​字符在任何地方引入软休息。 e.g：
演示：http://jsfiddle.net/abhitalks/sbg8G/15/
HTML：
...
<a href="big.ass.email@address-is.extremely.lame.de">
big.ass.email@​address-is​.extremely.lame.de
</a>
...
此处，在{＆＃34; @＆＃34;之后插入​之后＆＃34; -is＆＃34;在这些点上休息一下。
重要：word-wrap和word-break无法帮助您。
原因：
word-break适用于CJK（中文，日文，韩文）文本。 (Reference)。其主要目的是防止CJK文本的单词中断。休息是正常的。word-wrap用于指定浏览器是否可以在单词中断行以防止溢出。就是这样。 (Reference)需要注意的主要事项是＆＃34; ...通常不可破坏的单词可能会在任意点被破坏。＆＃34; 。任意点不会给你很大的控制权，是吗？硬连字符有助于指出断点。您的电子邮件地址中有一个连字符，并提示在那里打破单词。
注意：
更好的选择是让CSS3为我们做。 word-wrap和word-break不允许控制断点。 hyphens确实如此，但遗憾的是，hyphens仍然是＆＃34; 是一种实验性技术＆＃34;。
参考：https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
hyphens应该能够做到这一点：
hyphenate-limit-lines
hyphenate-limit-zone
hyphenate-character
hyphenate-limit-before
但是，目前这并不适用。否则，­会帮助你。
注2 ：
hyphens，会添加一个＆＃34;硬连字符＆＃34; （ - ）会在您的情况下导致意外结果（电子邮件地址会发生变化）。
答案 1 :(得分：1)