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/

Solution 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="[email protected]">
    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

Solution 2

You can try using text-overflow:ellipsis;

overflow:hidden;
text-overflow:ellipsis;

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

Comments

[misterManSam]

This is a very common question on stackoverflow

[Juuro]

@misterManSam No, it's not. I don't want to simply wrap my text when it reaches the end of a box. I do that already with word-wrap: break-word;. I want to "reset" the "preferred breaking points" such as "-, ?, !, &, ..." to wrap the text ONLY when it reaches the end of an box!

[Rohit Azad Malik]

Cehck to this jsfiddle.net/sbg8G/13

[Maxime Lorant]

This is not what the OP wants.

[Juuro]

Yes, that would be a solution, but sadly I can't do that here.

[edwinbradford]

​ also works perfectly within Wordpress. It gives complete control over where you want a line to break.

[whyAto8]

Super, the wbr is working fine and looks like a good solution to me. In my case, I have been working with emails and a requirement to soft break at @ or .com. So, wbr works fine for this. Thanks a lot.

[Christian]

This behavior looks like it produces problems for users who expect to be able to copypaste the email address and don't know about the invisible whitespace that's out to get them.

[Abhitalks]

@Christian: Not really. wbr is the recommended way to introduce a break opportunity for emails and URLs by MDN, HTML5 spec, and the living standard. It behaves like a zero-width space, but will not adversely affect copy-paste or click-through scenarios.

[Christian]

@Abhitalks : My point is that your demo doesn't use <wbr> nor warns the user of the problems that might arrive with the demo code.

[Abhitalks]

@Christian I have clearly mentioned wbr in the starting and if you’ve read the specs, you would know that &#8203 works the same thing. And there are no apparent problems which I should have warned about. Please let me know what exactly is the problem.

[Christian]

@Abhitalks : You provided a demo-link. It's easy to test it and copypaste the content in your demolink. If you copypasted it, you get a zero-width space within the copypasted content. Your get big.ass.email@​address-is​.extremely.lame.de which has two zero-space characters in it. You won't get [email protected] and the user might not notice the difference as the whitespace is invisible and get into problems when his mail program reacts based on the zero space characters.

[Abhitalks]

Thank you so much @Christian. But, that copy-paste won’t adversely affect anything. Try doing it. The email clients will work as intended and URLs will also work as intended. Please do let me know should you have any problem there.

[Gerbus]

Amazing! In react-native you can insert \u{200B} into your string

[bencergazda]

Email to an address containing ​ (copy-pasting HTML mailto: link) gets delivered as expected in Gmail.