A CSS trick in a React component🧚

Recently I encountered an interesting problem, let’s say, there are some list items to display using the basic React code like below 👇

a very simple <ul><li> …

✨ Notice those items should be side by side (inline and of course without any line breaks) like the result below👇

responsive lists view

I wrote some simple css:

I want that the items are side by side 👉display: inline

And the Result was 💥

Ops, line breaks 🙅‍♀️

See the line breaks? Ugly enough…
🤞 Here comes my simple solution:

prevent line breaks

That’s it! 🌸

The white-space CSS property sets how white space inside an element is handled, it collapses white space, but it does not allow wrapping.

The overflow CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.

The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…'), or display a custom string.

That was a quick simple css trick, hope you enjoy it! 💫

Thanks for reading!