'HTML: Soft hyphen (­) without dash?
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.
Solution 1:[1]
Use a zero-width space: ​
john.doe​@example.com
In action here: http://jsfiddle.net/uTXwx/1/
Solution 2:[2]
You may want to have a look on css property word-wrap.
And this page seems to be doing what you want.
Solution 3:[3]
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.
Solution 4:[4]
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​example.com
Both break without a hypen.
john.doe
@example.com
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Sapph |
| Solution 2 | Jan Zyka |
| Solution 3 | jlh |
| Solution 4 | Isak |