Here is a list of people’s names and it looks perfect for now.
However, since this is user-generated content, we need to be careful about how to defense the layout in case of something too long.
See the following figure:
In such layouts, consistency is important. To achieve that, we can simply truncate the name by using text-overflow and its friends.
Examples and use cases
In some scenarios, we might need to truncate a text that isn't important for the user, or doesn't affect the user experience. In such a case, truncating the text is a good idea.
Defensive CSS is a good way to write bullet-proof CSS!
If you’re interested to sharpen your skills in handling long content in CSS, I wrote a detailed article on that topic.
Support Defensive CSS
Do you like the content? You can buy me a cup of coffee. Thank you!