Having a button behave like a link inside a paragraph (wrapping text)

I've been trying to accomplish something for some time now, but can't figure out how to do it. I have a paragraph with some text in it. At one point, I want to add a button (which opens a modal). The problem is, I don't want the text to break to a new line. I want it to behave like a link. I've tried display: inline, different types of white-space, overflow-wrap and so on, but nothing works. I've even tried to compare the computed CSS between the button and an a tag, but can't seem to find anything relevant that would cause it to behave the way it does. Any ideas on how to solve this?
10 Replies
Jochem
Jochem•2y ago
https://codepen.io/jochemm/pen/qByLdzd Is this what you mean? a tags wrap if they need to, so I'm not sure what you're talking about regarding the wrapping
somrigostsås 🧀
This is what I mean. The text inside an a tag can wrap to a new line, while inside a button it can't.
somrigostsås 🧀
The more I think about it, it doesn't make sense for a button to look like that.
Jochem
Jochem•2y ago
I'd agree, but opening modals isn't a navigation action and shouldn't be done with an a tag for accessibility reasons
somrigostsås 🧀
Yeah, exactly, so I'm stuck a dilemma here. ^^ Also, changing -webkit-appearance to something else didn't work either.
Jochem
Jochem•2y ago
display: contents; was the key
somrigostsås 🧀
Yeah, that's one solution, but I guess you'll be losing a lot of other accessibility stuff, since text-decoration: underline, border and outline doesn't work with it.
Jochem
Jochem•2y ago
ah, dangit, you're right. I tested that the outline still worked, but that was before setting the display to content. You'd probably have to reproduce those using css again... At that point, it might just be better to misuse the A tag... though I have to admit I'm a bit out of my depth here when it comes to the accessibility issues
somrigostsås 🧀
Thanks for the help, though! Always nice to discuss these kind of things with someone else. 🙂
Want results from more Discord servers?
Add your server