how to prevent text spilling out when browser size changes? | Scrimba | Page 1

jolly flint Nov 12, 2023, 10:59 PM

#

here is my scrim! when i reduce the browser size, the text spills outside of the buttons/border. how do i stop this? https://scrimba.com/scrim/cof0c480699e0eda2745e1fea

Scrimba

Fork of Solo Project (PRO) - Password Generator

Learn to code with interactive screencasts. Our courses and tutorials will teach you React, Vue, Angular, JavaScript, HTML, CSS, and more. Scrimba is the fun and easy way to learn web development.

nocturne swallow Nov 12, 2023, 11:44 PM

#

The problem here is that the buttons are set to 100% and live inside the all-items div. The all-items div is set to 60% of the width of the body. So, as the size of the page shrinks so does the width of the all-items div and thus the width of the buttons.

To further complicate things your buttons are set to no-wrap and so the text flows outside. Suggest that you perhaps remove the no-wrap which will force the text to wrap in the buttons when the width is too small.

This is a trade-off of course and perhaps not your ideal design however you have incompatible constraints in there and something's got to give. I would suggest that the wrapping button text looks way better than the text spilling out.

The are other options, like clipping, that are equally unappealing.

#

Here's a screen shot without the no-wrap and a narrow screen:

It's not bad...

jolly flint Nov 13, 2023, 12:05 AM

#

Thanks so much !!!

#how to prevent text spilling out when browser size changes?