How to prevent line breaks in list items using CSS?

Spread the love

To prevent line breaks in list items using CSS, we set the white-space and text-overflow properties.

For instance, we write

li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

to add text-overflow: ellipsis; to add ellipsis after the truncated text.

We add white-space: nowrap; to make the text display on 1 row.

And we add overflow: hidden; to hide any overflowing text.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *