I'm working with a client that has an existing user base with some very long names and usernames. (i.e. Xx_fakenamehere_xX) I don't want to truncate them (they're already truncated in the current version) so I'm trying to find out ways to solve this.

enter image description here


4 Answers 4


I can think of a number of strategies. Also look at Should a username be truncated? and Truncating long text labels - Best Practices? for some related ideas.

Wrap. If the name exceeds a certain length you could switch to a smaller font and wrap the name. Will not save you in all cases though, since you've only got about two lines of space in that header and some people have really long names.

Scale. Decrease the font-size to make the name fit. It's probably best to have a minimum scale though. You could combine this with the wrap strategy. Makes for some complicated code though.

First name, possibly with first letter of last name. If the displayed name is that of the user, this would be sufficient. It is probably not sufficient to identify other users in the system. You also need a way (tooltip perhaps) to display the full name. You also need to know what part of the name constitutes the first name (eg. if you only ever asked for a "name" and not "first name, last name" I don't think you can split the name up correctly).

Truncate. At some point, looking at where and how the name is displayed, you're just going to have to truncate. Make sure you do it right and put an ellipsis at the end and not just cut the last character in half.


Truncate, but display the complete name on hover using for example an overlay superimposed over the original.

My error: this question is about mobile that has no hover! (thanks @Sheff) And touching the truncated name is not an option, because the finger would obscure the expanded name most of the times.

I'd try a button below the names column (I'm assuming there is one such column) that, when touched and only while touched, would enlarge the names column width allowing the names to be seen in full.

The user might want to see the names in the list, but maybe not the full name all the time.
Also, account for cultural differences when defining the with and the font size of the user names column. Maybe in your culture the names are short and monosyllabic, like "John Doe", while other cultures like in Spain or Colombia have double first names and double family names.

  • 1
    The question specifically mentions mobile which has no standard hover interaction.
    – Sheff
    Commented Jul 17, 2013 at 16:50

Other than the obvious solution of suggesting a smaller font size to ensure the name fits in, a suggested design you can go with is to show the first name with a dropdown next the user name which on expansion shows the full name and any other details you would care to show.


download bmml source – Wireframes created with Balsamiq Mockups

An example of a site which does this is Gmail (though I admit they do show the email id signed in) enter image description here

  • 1
    Just curious. Why did you blur your email address but leave it still readable (well ok, distinguishable)? Are robots doing OCR now as well? On all images? Commented Apr 19, 2013 at 19:18
  • Haha I think I didnt do a good job of it :)
    – Mervin
    Commented Apr 19, 2013 at 19:23
  • hmm, you just put an extra step in the process for anyone who loves this answer and would like to contact you about work ...
    – Toni Leigh
    Commented Jul 17, 2013 at 17:07

Not a solution but a couple of things to consider that may help you define the solution:

1) Typical length

Do you have any idea about the names that will be in the system? You said its an existing user base so if you analyse this data it may give some insight? If you know the "typical" length it could give you a better idea of how to handle the issue.

For example if I can often only see peoples first name, and there are a lot of people with the same first name then its a big issue

2) Use cases

How are people using the name information, are there a lot of names listed next to each other? Or is it like a profile name, 1 per page. Are there other unique identifiers or is name integral to completing whatever the task is?

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.