I’d like to render a link-styled <button> within a paragraph of text and have it cleanly participate in the paragraph’s line wrapping / text flow.

Styling the button isn’t hard, and setting display: inline lets it participate in normal line wrapping / text flow – but only if the button is able to fit on one line of text. Otherwise, the button gets displayed on its own line.

In other words, I want what MDN calls a “line-split inline element.”

(It would be far simpler to just turn the <button> into an <a> or a <span>, but that’s bad for accessibility, and it’s my understanding that modern HTML + CSS is supposed to give you enough control to not have to resort to such things.)

Here’s what I’ve tried so far, with a demonstration of 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>