condensing a long uninterrupted string

Question

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?

Answer 1

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?

Answer 2

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

Answer 3

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!

Answer 4

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