How to make sure that name fits in the designated space on the website

So I am building a quick small website. In the website, when the user is logging in, the website asks for the name. In my database, I have allocated a VARCHAR(255) for the username and restrict the first name to 50 characters when the user is logging in. However, I have no clue how to make sure that the any of the names being displayed on the website don't overflow their designated container. I don't want to use word-wrap: break-word and overflow: auto because I don't want to break up the name or hide part of it. I just want to make sure it fits in its container. How can I make sure that it fits? Thanks in advance.

Yang