Make button width be determined by text after text wraps
My button looks great until the screen width gets too small and then the button text starts wrapping. That’s fine but the problem is that the width of the button stays the same and so it looks like there is a ton of padding even though there is not and the element overflows because of that. A width of fit content works until that text wraps. How do I make fit content work even after the text wraps?
22 Replies
do you have a live example?
Here is a picture. Does that help?
that's not a live example
"live example" = working code.
This could either be the live URL or a demo on Codepen orJSfiddle for example.
and it's tailwind, so, should be even easier to make a working live example
From the video it looks like the button (or something else) has a min-width or is preventing the content from reducing further.
yup, but that's just guessing
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
that's the text size
the word "important" can't be reduced any further
what you can do is enable hyphenation
What do you mean? My main problem is the the width of the button after the text wraps is much bigger than it needs to be.
the example you've sent doesn't behave like that
but that doesn't matter
^ this should do the trick
for this to work, you MUST add
lang="en" to the <html> elementeven at this tiny size it doesn't overflow
and on the bigger size, it works as it should
and when things are tight, it adds hyphens
If you go into dev tools right after the text wraps the first time you can see that the width is larger than it needs to be. I am not worried about overflowing. I know that the example does not overflow but if I can figure out how to get the width to not be any wider than it needs then the overflow problem will be fixed on my actual website.
in the example you've sent, it's the text
it can't be made any smaller, so, it overflows
you can fix it by just adding
overflow-wrap: anywhere;
but it looks better if you add hyphens: auto; and then add the MANDATORY lang="en" (or your language) to the <html> element
but you are overcomplicating it with flex, so, i sent an example without flexThis is what you're trying to do, right? Shrink-wrap the container around the text?
Yes Ray that is exactly what I want.
I have two things that might be useful...?
I found this pure CSS solution https://kizu.dev/shrinkwrap-problem/ which I could not get to work properly myself. There are working examples on that page though so I'm clearly just doing something wrong--you might have better luck than me.
But I also have a Javascript solution that does work, but only in one direction--if someone's screen shrinks and makes the text wrap, and then the screen becomes larger again, the text won't unwrap, and I don't know what to do about it. But it's halfway there I guess?
Here's a codepen: https://codepen.io/TuxedoDemon/pen/azvwVZb
My Javascript is probably atrocious, sorry.
I hope that helps; it seems like this is a common issue and there still aren't a lot of good ways to handle it.
Thanks. Yeah I think I just have to use JavaScript. I feel like there should be a css property to do that but I guess the developers will get around to that eventually. This was the final code.
Agreed, yeah, it's weird there's not one already. Hopefully soon. Also, glad you got it working, np!
thank you for sharing your final working code btw, i'm still super new at this stuff so that's helpful