How to prevent line breaks in list items using CSS?

Spread the love

Sometimes, we want to prevent line breaks in list items using CSS.

In this article, we’ll look at how to prevent line breaks in list items using CSS.

How to prevent line breaks in list items using CSS?

To prevent line breaks in list items using CSS, we can set the white-space property to nowrap.

For instance, we write

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

to add white-space: nowrap; to stop li elements’ contents from wrapping.

We add overflow: hidden; to hide any overflowing content.

And we add text-overflow: ellipsis; to add ellipsis at the end of the content if there’s overflow.

Conclusion

To prevent line breaks in list items using CSS, we can set the white-space property to nowrap.

Leave a Reply

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