The One Thing You Need to Know To Avoid CSS Overflow

10 lines of code to make your text always span one line, and save you from countless headaches

THE PROBLEM

So imagine you have a component that shows some user information like name, surname, and e-mail. The design shows a nice layout where all lines take the same space.

Easy enough, you implement the design and release it into the wild. But then you realize that this UI can break with a person with a longer name.

That’s because the data being shown has variable length and you should account for all the cases where it will be used. Here is a demo with the example.

There will be users with super long names, e-mail addresses, and what not and this shouldn’t break your UI.

THE SOLUTION

One approach to prevent this would be to create a wrapper component for variable length text which is expected to be shown in a single line. All overflowing text can be scrolled to the side if needed.

OneLineScroller.jsx

Wrapping your text fields with this component makes them span exactly one line. Check example #2 with the OneLineScroller.

Thanks for reading! Take care, Jon Portella.

Get notified of new blog posts?

RSS is the correct choice, btw.