Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

veryveryveryverylongemail@...com

ve...@blabla.com

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

example of very long uninterrupted string

share|improve this question
2  
Any reason the email has to be displayed? –  Mervin Johnsingh Feb 9 '12 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. –  dalbaeb Feb 10 '12 at 14:25
add comment

4 Answers

up vote 5 down vote accepted

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

<a href="mailto:veryveryveryveryverylongemail@blablabla.com">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?

share|improve this answer
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 '12 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". –  dalbaeb Feb 9 '12 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 '12 at 20:53
add comment

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!

share|improve this answer
add comment

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.

averyveryveryvery
verylongaddress@host.com

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

share|improve this answer
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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