HTML: Soft hyphen (­) without dash?

Question

I have a little layout problem: on a clients website, we show contact information of people in a little box. The width of that box is constrained. As it happens, there are people with very long names (this is in Germany, after all...), and the email address is a concatenation of the given name and family name. The result: with certain names, the email address overflows the constraints given by the about box.

Inserting a ­ before the @results in the correct line break, but looks like this:

john.doe-
@example.com

Is it possible to suppress that dash? I don't want to use <br />, because for 90% of the names, the available width is more than enough.

Answer 1

Though I'm not sure how this does cross-browser (probably pretty well), you could always use the thin space character ( ) or the zero-width space (​).⁺⁺

john.doe @example.com

⁺⁺ I would not suggest using the zero-width space, as apparently some browsers will not render it correctly (source).

Answer 2

You may want to have a look on css property word-wrap.

And this page seems to be doing what you want.

Answer 3

Use a zero-width space: ​

john.doe​@example.com

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

Answer 4

You can suppress hyphens by setting hyphenate-character to an empty string:

{
  hyphenate-character: "";
}

won't print a dash, will copy/paste without unwanted characters

Answer 5

If you're willing to drop support for Internet Explorer 11, then you can use the <wbr> element. This is probably superior to using the zero-width-space, because it won't be copied into the clipboard.

See it in action here

MDN documentation

Answer 6

I prefer to use the intended <wbr> line break opportunity HTML element. It's essentially the U+200B zero-width space and behaves as it does, so no hyphen.

I find that it's clearer to see what <wbr> does in the source code than using ​.

john.doe<wbr>@example.com

john.doe&#8203;example.com

Both break without a hypen.

john.doe
@example.com