How to prevent line breaks in list items using CSS?

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.