Html Question posted in
Some basic documentation can be found here.

Html – Render <button> as a text link in a paragraph, with wrapping / flow

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>
Tags:

2

Answers


  1. 0

    The only thing you can do is to use display: contents but you need to see about the accessibility issue that might happen doing this.

    .inline-button {
  background: none;
  border: none;
  color: blue;
  text-decoration: underline; /* this won't work (and other properties as well) */
  cursor: pointer;
  font: inherit;
  padding: 0;
  display: contents;
  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>
    Login or Signup to reply.
  2. 0

    I think using display: contents on the button link itself would be a good solution here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search