Email Parsing – How to Line-Break an Email Address

emailparsing

After some discussion, I have come across a rather complicated situation. Say I intend to display an email address. I have, obviously, limited space available on the screen – be that browser or application UI. Email addresses are, however, limited to 64 + 1 + 255 = 320 characters by RFC5321, while the same RFC also caps the path at 256 (which leads to an actual 254) characters. That's quite a lot for most screens – the lines I'm writing right now contain less than a hundred characters each.

So, that poses a bit of a problem when trying to display email addresses. At this character count, sufficiently large containers would seem huge for a "default-sized" email address (my average is a bit below 30 characters right now), while a smaller container would lead to overflow.

At first the option to use a smaller container but introduce line-breaks on longer addresses seems like a good idea.
Which brings me to the first important question to this: Where do I break? After a set/relative amount of characters? Before or after the @?
And the second question follows right after: How do I break? Zero-width space? <wbr> in HTML? Insert a dash or not?

There seem to be reasons for and against any of these, but I can't for the life of me find any sources to go off in my decision. It seems as though nobody ever actually dealt with this situation (that is, the physical cap on estate is never exhausted). The best I can find are some online publishing styleguides preferring an email address in one line and adjusting surrounding elements to make that work. Well, we might just not have that option under some circumstances.

Best Answer

How about don't line break at all?

some.really.long.addres@my...

You can use text-overflow:ellipsis; and then something like HTML - how can I show tooltip ONLY when ellipsis is activated?:

$('.mightOverflow')
    .bind('mouseenter', function () {
    var $this = $(this);

    if (this.offsetWidth < this.scrollWidth && !$this.attr('title'))
        $this.attr('title', $this.text()); });

If you're doing a touch/mobile-enabled app, you can also add a handler so when someone clicks it shows the full address in another box (also allowing copy/paste, which is probably a main reason someone would want to get the whole address), and in that, just do a hard wrap (eg, with word-wrap:break-word;). Since it's just the address being displayed in some kind of overlay container, it would be completely natural to wrap inside that way.

If you think it would beneficial to always see domains, you could always shorten both the address and domain sections independently:

really.lon...@domain.com

another.reall...@long.domai....

You'd have to experiment with the exact code, but having <span>s around both parts, with max-width:50%; text-overflow:ellipsis; is along the lines of what I'm thinking. It would probably require some smarter code to make the best of use of space to display "really.long.address.blah.blah.blah.blah@a.com" (or a short address and long domain) but it could be done.

Related Topic