What is the best way to "wrap text" on a web page

Question

I have a HTML page where I am listing pictures of people and their names. If there name is longer than 20 characters I want it to show up on 2 lines instead of one to avoid a lot of empty horizontal space for the people below them

What is the simplest way to make sure to do this. To be clear, I don't want to break up words in name but rather just break up the words on two lines.

Answer 1

You would rather need to decide what is the maximum width that the name can take. Then,

.boxed-name { width: ?? px;text-align: ??; }

The main issue with a character counting solution is that it doesn't consider the font family neither the font size. This can lead to serious differences. Also, mmmmmmmmmmmmmmmmmmmm can be longer than iiiiiiiiiiiiiiiiiiii if the current font is not fixed.

Answer 2

You can try setting the width of the container that holds the name to be smaller or alternatively add some padding. For example:

HTML

<div class="name">This is my name</div>

CSS

.name { width: 50px; /* or whatever value works for you */ }