At the moment I am building a webpage where the main navigation is located on the side, not at the top. The page uses a CMS where the user can create own menu links. That means if someone enters a superdupermegahyperlongword as menu link, there is a space problem:
While the link length in that example is still quite moderate I think you get the point. Extending the with of the navigation is not an option.
One possible solution would be to simply wrap the link whenever it needs to be wrapped:
This approach might kinda work, but its ugly and probably hard to read – I think we can agree on that. Another solution would be to add an elipsis:
That is even worse that the forced wrap I believe because who clicks a link that is unreadable? The same goes for simply cutting off long links or fading then out instead of using three dots. While a fade might look better, its still not a good solution in my eyes.
Inspired by Apple (Facepalm time? I don't know) I had the idea to do it like that:
As long as the link will fit in the box when using a font size only a bit smaller than the rest, I will apply that smaller font size. Of course the font size should not fall below a certain size, so something like that shouldn't happen:
But then I can still use an elipsis or something like that.
What do you think of that solution – a good idea or not? Will the slighty different font sizes be irritating for the user?