Wrapping long email addresses in small boxes
break, css, html, text, word-wrap
Solution
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@​address-is​.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:
- `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.
- `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
Problem
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/