Wrapping long email addresses in small boxes

Question

I have a box with a width of 118px which contains an email address. I use word-wrap: break-word; to wrap the addresses better. But on a special kind of addresses this makes it worse.

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

Because of word-wrap: break-word; it breaks after "addre" but ceause the rest of the address doesn't fit in one line it breaks again at a "prefered breakpoint" which happens to be the "-". In desired behaviour the second break in the email address would not be after "-" but after "extremely". I fear that's not possible with just CSS. Isn't it?

Here you can see a small example: http://jsfiddle.net/sbg8G/2/

Answer 1

Your best bet here would be to use <WBR> tag or ​ character to introduce a soft-break wherever you wish. e.g.:

Demo: http://jsfiddle.net/abhitalks/sbg8G/15/

HTML:

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

Here, ​ is inserted after the "@" and after "-is" to cause a break at those points.

Important: word-wrap and word-break won't help you here.

Reason:

1. word-break is meant for CJK (Chinese, Japanse, Korean) texts. (Reference). Its main purpose is to prevent word breaks for CJK text. Rest is normal.
2. word-wrap is used to specify whether or not the browser may break lines within words in order to prevent overflow. That's it. (Reference) The main thing to notice is that "..normally unbreakable words may be broken at arbitrary points.. ". Arbitrary points don't give you much control, do they?

Hard-hyphens help to indicate the break points. You have a hyphen in your email address and that gives a hint to break word there.

---

Note:

A better alternative would be have CSS3 do it for us. word-wrap and word-break doesn't allow control of break points. hyphens does, but, unfortunately hyphens still "is an experimental technology".

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

hyphens should be able to do the trick along with:

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

But, this doesn't work currently as it should. Otherwise, a ­ would have helped you out.

Note 2:

hyphens, would add a "hard hyphen" (-) which would cause unintended results in your case (the email address would change).

Credits: here, here, and here

Answer 2

You can try using text-overflow:ellipsis;

overflow:hidden;
text-overflow:ellipsis;

http://jsfiddle.net/sbg8G/8/