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
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 wrappingThis is what I mean. The text inside an a tag can wrap to a new line, while inside a button it can't.
The more I think about it, it doesn't make sense for a button to look like that.
I'd agree, but opening modals isn't a navigation action and shouldn't be done with an a tag for accessibility reasons
Yeah, exactly, so I'm stuck a dilemma here. ^^
Also, changing
-webkit-appearance
to something else didn't work either.ah, got it! https://codepen.io/jochemm/pen/qByLdzd
display: contents;
was the keyYeah, 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.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
Thanks for the help, though! Always nice to discuss these kind of things with someone else. 🙂