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?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
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
They show first and last symbols
Action by clicking on username
I would personally break line into two or more if it's needed. Easy to do with css on a web.