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.

1 Answer 1


How about don't line break at all?


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

    .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:

[email protected]

[email protected]....

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 "[email protected]" (or a short address and long domain) but it could be done.

  • Not too bad an idea, yes. I see some pitfalls with the @ being pushed into overflow, though - 64 characters for the local part is still an awful lot more than most email addresses' total length in my experience.
    – user98085
    Feb 7, 2014 at 2:24
  • @FEichinger Added some thoughts about always showing the part after @ .. Tough without context to get too much deeper. Are the e-mail addresses (or domains) typically known to the person viewing, as would be the case within an organization or social network? If not, then I can see the importance of showing the domain. Maybe a better question is simply: why are you showing the e-mail address? What will the user do as a result of seeing it? Without more context on your situation it's hard to make specific recommendations.
    – gregmac
    Feb 7, 2014 at 3:14
  • I tried very intentionally to avoid giving a specific situation. Suffice to say, this would probably be more suited on UX with a more specific use-case. This is more intended for a general "what are the options?" kind of deal.
    – user98085
    Feb 7, 2014 at 3:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.