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.
