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/

Morly

This is a very common question on stackoverflow – Curassow

@Curassow 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! – Morly

Cehck to this jsfiddle.net/sbg8G/13 – Rumble

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="[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

Elman

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

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. – Artefact

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. – Fransis

@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. – Elman

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

@Fransis 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. – Elman

@Elman : 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. – Fransis

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. – Elman

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

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

Answer 2

Hello I have a similar issue and I solve it with:

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

Also you could check this: Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc

Dysteleology

Answer 3

You can try using text-overflow:ellipsis;

overflow:hidden;
text-overflow:ellipsis;

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

Cnemis

This is not what the OP wants. – Tried

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

Answer 4

You only need these styles overflow: hidden; overflow-wrap: break-word; and your job is done.

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

The same will work for long text (single word) with no whitespace.

Fireguard