HTML: Soft hypen (& shy;) without a dash?

Question

I have a little problem with the layouts: on the clients website we show the contact information of people in a small box. The width of this window is limited. As it happens, there are people with very long names (it's still in Germany ...), and the email address is the concatenation of the first and last name. Result: with specific names, the e-mail address overflows with the restrictions specified by the about field.

Insert ­ before @ leads to the correct line break, but looks like this:

 john.doe- @example.com 

Is it possible to suppress this dash? I do not want to use <br /> because for 90% of the names the available width is more than enough.

Answer 1

Although I'm not sure how the cross browser does it (maybe pretty well), you can always use a thin space character (   ) or zero-width space ( ​ ). Strike> ⁺⁺

 john.doe @example.com 

⁺⁺ I would not suggest using a space with zero width, as, apparently, some browsers will not display it correctly ( source ).

Answer 2

Use space with zero width: ​

 john.doe​@example.com 

In action here: http://jsfiddle.net/uTXwx/1/

Answer 3

You might want to take a look at the css word-wrap property.

And this page seems to do what you want.