So the issue is trying to display usernames in these grey modules. I see the option to scale, truncate, display first/last few chars, or word wrap (which may look bad). The usernames don't have any character limit.

Which would you guys recommend?

displaying long username problem

  • 3
    While there is no maximum limit, do you know the details of the current usernames? Enough to extrapolate out an average length? You can probably accommodate 95% of users with just truncation and not impact anyone.
    – JonW
    Commented Mar 21, 2016 at 16:01
  • Personally, I'd start by limiting username's lengths rather than cutting them afterwards
    – Devin
    Commented Mar 21, 2016 at 20:50

2 Answers 2



I have this kind of problem before. Try to define a number of symbols to show and provide some tooltip with a full username on hover. To show few last symbols is a good idea too.

Why so User awareness is first of all. You show that it is not a full username and "there are some symbols after". Last symbols can show what ones. However, it is better than simply cut username without dots (it is even a rude mistake in such case). "JohnSmith" is not the same as "JohnSmit4325". Wrapping is not effective and readable (you said there is no limit for symbols)

On mobile Force-touch is available on newer Apple gadgets only. So, as we can see, there is a lack for this variant. A tooltip on hover is unavailable. Then we should provide the hint, like tooltip looks, by a single tap on the username (if there is no other action for it). The disadvantage is in its nonobviousness. Should try to write something like "Tap to show full username" to help user know about this possibility

How Dropbox handles it

enter image description here

They show first and last symbols

enter image description here

Action by clicking on username

enter image description here

  • 1
    Can you expand on this? Why are you suggesting truncation and hover? Hover doesn't work on a phone, by the way. Nor for people using keyboards.
    – JonW
    Commented Mar 21, 2016 at 17:19
  • @JonW Could you recommend the way for people without any sensors and mouse in such case? It is quite an interesting question and I feel that I can't answer it myself
    – user80595
    Commented Mar 21, 2016 at 17:39

I would personally break line into two or more if it's needed. Easy to do with css on a web.

word-break: break-all;


  1. Truncation
  2. Truncation with tooltip


  1. User can see full name on any device, including mobile where we have no hover events and showing tooltip could be a problem.
  2. If you have really crazy long names, you still can implement truncation, but after reaching line limit.
  • Why would you do this? This is a UX site, not an implementation site, so we're more concerned with why certain design patterns work better than others, rather than how those are actually implemented.
    – JonW
    Commented Mar 21, 2016 at 17:18
  • 1
    If there truly is no limit to username length I believe this could get messy if someones name was large enough to wrap it to 10+ lines
    – DasBeasto
    Commented Mar 21, 2016 at 17:27

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.