I have some URLs and emails that are output into a column with borders, which is sometimes too narrow for the data. As a result it "spills over" the border on the right. It's too late to change the design. A screenshot is attached at the bottom.

Question is: what's the best way to "condense" it? I've thought of only one option, really: to replace almost everything either before or after the @ sign (and maintain a full version in the 'title' attribute):

[email protected]

[email protected]

Assuming that breaking the line with CSS is not an option, what would be a good solution?

example of very long uninterrupted string

  • 2
    Any reason the email has to be displayed?
    – Mervin
    Feb 9, 2012 at 19:49
  • This is how the design was approved. Once it's been approved - very hard to change anything. To project managers client is something of a supreme being. Feb 10, 2012 at 14:25

4 Answers 4


If it's not super important that you show the actual email address, you could change it to an action:

<a href="mailto:[email protected]">Send me an email</a>

If the purpose of showing the email address there is so that I can send that person an email, then you don't really need to show it. Just show me a call to action with which I can send you an email; my email client will take care of the rest.

The upside of "Send me an email" or something similar is that it won't change depending on how long the address is.

If the purpose of displaying the email address there isn't to act on it... then why is it being displayed?

  • 2
    Depending it might be more convient to use the written email; to copy into one's address book or copy into a different email client. Webmail often doesn't pick up on mailto: either, as I'd need a special program for mailto: to open my Gmail.
    – Ben Brocka
    Feb 9, 2012 at 20:09
  • You're right, also Ben Brocka has a point. However, here it would also mean that I'd need to break out of template "item-title: item-content", as in "contact: john smith". Feb 9, 2012 at 20:48
  • There's nothing wrong with "breaking out of a template". Like I mentioned in the answer, it depends on what people are going to do with the email address. If they're going to copy/paste it, then you might want to display it. If they're just going to use it to send someone an email, then not. Which is it? :)
    – Rahul
    Feb 9, 2012 at 20:53

Just throwing out extra ideas here: you could put the address in a div, set the div's width appropriately, and set overflow to hidden.

Then on mouseover, bring the div to the top of the z stack and set overflow to display. You'd probably want some padding and a white background on the div so it'd show up and give the user a little room to mouse around in there in case they want to select the text and copy it.

I'm not sure how "discoverable" that is for the user but eh, it's something you could try!


If you have to display it and must break the line, you could use a dictionary to attempt to break up into words, then split line after a full word e.g.

[email protected]

An alternative to displaying it all could be

averyvery... @host.com [icon of paper clip here]

Then show full address in tool tip + tool tip of paper clip should say click here to copy full address (and its action should be accordingly).


Condense the email is not a good option. People are not used to seeing that. We had this problem and so far, the best way to solve was to place the mail after the image in order to benefit more in width.

But if you can't change it, you can cut your email and replace the end by '...'. It can be done in css using the property text-overflow:ellipsis.

Here's the image i can't post.. : http://cl.ly/3i26462z3n200s1S1g2j

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.