11

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.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Benjamin Wohlwend
  • 30,958
  • 11
  • 90
  • 100

6 Answers6

8

Though I'm not sure how this does cross-browser (probably pretty well), you could always use the thin space character (&thinsp;) or the zero-width space (&#8203;).++

john.doe&thinsp;@example.com

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

  • 1
    I'd be interested in seeing a modern browser that doesn't render this properly. The linked page has info on two tracked bugs, both of which have been resolved as fixed. – Sapph Feb 18 '11 at 08:22
  • 3
    Except if you copy and paste this email from a browser into Outlook, notepad etc. you'll get `john.doe?@example.com` – joshcomley Feb 18 '11 at 08:24
  • @joshcomley I just tried this with the examples from the fiddle in my post, and had no such issue. – Sapph Feb 18 '11 at 08:27
  • Sapph is correct, his answer provides the correct copy/paste result, while @D_N's thin space ends up with a space in place of   I know this is not the OP's need (maybe) but for others looking for a solution to this I think it's important to mention that here. – Shiv Kumar Feb 18 '11 at 08:31
  • @Sapph, I would be, too, but wanted to be cautious where I wasn't sure. (Though Opera Mini comes to mind. I say as a suffering Blackberry user.) –  Feb 18 '11 at 08:34
  • @Shiv Kumar I did try Outlook and Notepad which had the correct output, but I got a ? in Notepad++, so it may very well depend on where you're trying to paste things. :) – Sapph Feb 18 '11 at 08:37
  • 1
    @Shiv Kumar, in my test I had no *visible* character for the zero-width space, but as expected, that character *did* transfer over into paste (experienced as a spot in the email address it takes two arrows left or right to get past). I have no idea whether that'd be problematic for email servers, but I think it's the same issue either way. I wouldn't suggest this for plain text copy/pasting. –  Feb 18 '11 at 08:41
  • I actually copy and pasted my example from the fiddle! So I'm not sure how that is happening. Tried in Chrome, FF and IE. I'm not sure how to get it without the `?` appearing. See http://jsfiddle.net/YEyFy/6/ for exmaples (I was pasting into notepad) – joshcomley Feb 18 '11 at 08:42
  • @D_N, good catch on the left arrow/right arrow test. Definitely worth keeping in mind. +1 to that comment! – Sapph Feb 18 '11 at 08:42
  • @D_N servers obviously won't have an issue since this a purely presenttional. However, if someone where to copy/paste in an attempt to send an email, then it won't work. – Shiv Kumar Feb 18 '11 at 08:43
  • @Sapph, I tried in Outlook and notepad not in Notepad++. It's possible that notepad++ is seeing "visual" crlf as some character? – Shiv Kumar Feb 18 '11 at 08:46
  • @Shiv Kumar, I meant I don't know what'll happen when you copy/paste this into Outlook and send the email. (Email servers can be smart, and those characters are probably invalid.) But this is the same issue that can crop up with any such character, whether it's `­` or ` ` or `​`. –  Feb 18 '11 at 08:47
  • 2
    A character is a character, no matter how small. :) –  Feb 18 '11 at 08:48
  • Thans for all your answers and comments. I've come to the conclusion that, sadly, there is no satisfactory technical solution. Both `​` and ` ` introduce spurious characters when copy&pasting (which is what people tend to do with email addresses). I'll propose to the client that the few people with such gigantic email addresses get a shorter alias to use on the website. – Benjamin Wohlwend Feb 18 '11 at 16:10
  • Ah, so this is for a plain text copy-and-paste more than a display? I'm glad we delved into the specifics then. I'd supposed it was mostly for display, and that most users would be clicking on a link, where the `mailto` address would not need this in any case. That would leave an outside case of someone 1) *not* clicking the link (only) on 2) long names. You could also create a 'copy this email address' button to bypass this situation (requires javascript + Flash [http://davidwalsh.name/clipboard]). Just tossing it out there. –  Feb 18 '11 at 21:25
  • @D_N: the displayed email *is* embedded in a `` link, so people clicking on that link would not have any problems. But my guess is that the percentage of people just selecting and copy&pasting the email is larger than zero. – Benjamin Wohlwend Feb 21 '11 at 12:52
4

Use a zero-width space: &#8203;

john.doe&#8203;@example.com

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

Sapph
  • 6,118
  • 1
  • 29
  • 32
2

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

jlh
  • 4,349
  • 40
  • 45
1

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

And this page seems to be doing what you want.

Jan Zyka
  • 17,460
  • 16
  • 70
  • 118
1

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

badunius
  • 61
  • 1
  • 5
0

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 &#8203;.

john.doe<wbr>@example.com

john.doe&#8203;example.com

Both break without a hypen.

john.doe
@example.com