Long Content

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.

.username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Examples and use cases #

Section header #

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.

If you’re interested to sharpen your skills in handling long content in CSS, I wrote a detailed article on that topic.