For the app I am currently developing, I have a vertical navbar which contains the main menus required for the user. One of the menus is for User Admin, which is a profile picture with the User's first name under it.

I am having a think about how I should deal with extra long names in this field. The navbar is obviously a fixed width, and so deals with about 10-12 characters (depending on character used) before starting to overflow.

Names over this length are somewhat in the minority, but I don't want to have a lot of overspilling elements if I have to use their name in other locations within the app, and i'm not sure how I feel about truncating the name or adding a "..." etc.

Is there an assumed best practice when dealing with this kind of issue?

  • 4
    Did you look at ux.stackexchange.com/questions/38386/… ?
    – rk.
    Commented Jul 17, 2013 at 16:11
  • Is there a reason that the text can't be resized to fit a specific width regardless of character count? I myself am not a huge fan of this practice, but seeing as its in a Nav Bar, distinct from the sizing of other surrounding text, I feel that this is a viable solution. Commented Jul 17, 2013 at 17:16
  • Can you give an example or a mock up ? At the moment I can only think of making more room for your names as a solution.
    – Toni Leigh
    Commented Jul 17, 2013 at 20:44
  • I don't like the idea of truncating, but it seems like the only other viable solution next to making the font size dynamic. I will add a mockup. Commented Jul 18, 2013 at 15:19

2 Answers 2


There are many solutions from omitting to resizing and they all works. This is just one more- make distinct right border, e.g. vertical line. If text doesn't fit this 'cut line' over text will indicate that text is out of visible boundary. Hovering full text will definitely help to obtain correct information if user need it.

Although we are talking about name the best solution IMO is resizing name to fully display it. The reason is that some trancations of names could be harmful for people.



  1. Is the name really required to be display ?
  2. Could you expand the navbar and reduce the font-size of the name a bit if it is longer than a certain number of characters ? Since this is an edge case, experience should largely remain good.

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.