I want to incorporate a link-styled <button> within a block of text while ensuring that it flows smoothly with the surrounding content.
Although styling the button is straightforward and setting display: inline allows it to blend into the text flow, it becomes problematic if the button spans multiple lines as it then displays on a separate line.
Essentially, I am looking for what MDN refers to as a "line-split inline element."
(While converting the <button> into an <a> or a <span> would be easier, it's not ideal for accessibility purposes. Modern HTML and CSS should offer enough customization options without resorting to such alternatives.)
Below are my attempts so far, along with a demonstration illustrating the issue:
.inline-button {
background: none;
border: none;
color: blue;
text-decoration: underline;
cursor: pointer;
font: inherit;
padding: 0;
display: inline;
line-height: inherit;
}
#narrow {
width: 5em;
}<p>
This is a paragraph with <button class="inline-button">inline button</button> that wraps nicely with the text.
</p>
<div id="narrow">
<p>
This is a paragraph with <button class="inline-button">inline button</button> that wraps nicely with the text.
</p>
</div>