DEV Community

Xiaomin Zhu
Xiaomin Zhu

Posted on

Prevent line breaks with CSS

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 👇

1_rnbP3ABwGNdc6V9creIC7wa very simple <ul><li> …

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

1_TQSt2hG-9LPjCqEizo_TSQ
responsive lists view

I wrote some simple css:
1_CoYp9iE8Zn5Hf9sokdkhmw
I want that the items are side by side 👉display: inline

And the Result was 💥
1_pOUDtDCy5C_p5C_ppu28UA
Ops, line breaks 🙅‍♀️

See the line breaks? Ugly enough…
🤞 Here comes my simple solution:
1_D_1uwqGEGyv7u93T9t3fFw
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!

Discussion (0)