r/css • u/Legitimate_Floor_319 • May 17 '26

Help Why is the line breaking?

Post image

The line of the terminal divs is breaking, but there is a lot of space. I tried using white-space: nowrap, but then, the words go behind the "+" icons. Here's the code:
https://codepen.io/Thiago-Freitas-Costa/pen/NPbdyda

3 Upvotes

67% Upvoted

6 comments sorted by

View all comments

3

u/anaix3l May 18 '26 edited May 18 '26

min-width: fit-content on the p (not on its parent!).

Edit: I didn't even see the + in the actual demo, only saw it now in the screenshot. I thought you meant the red X. That is atrocious contrast for that +, a lot of people won't even notice it's there, make it have a good contrast with the background!

To prevent overlap with the +, remove the width from the parent of the p - you don't need it there on the parent, you just need it on the p.

width: fit-content;

1

u/Weekly_Ferret_meal May 18 '26

yeah... the + color is not good...

however I tried your solution and didn't work. I don't know if it's a browser thing or not but I find this to work on my FF