Button element between parentheses return to unwanted line

Question

I don't want to have a line break between my opening parenthesis and my button element.

The problem:

What I would like:

I found only one solution: add display: contents; on the button style, but this makes the button inaccessible.

JS FIDDLE

button {
  color: blue;
  border: none;
  background: none;
  padding: 0;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non feugiat elit, quis rhoncus ex. Proin nunc lectus, vehicula a porttitor a, scelerisque quis erat. Sed non orci elit. Phasellus id nisi nunc. Proin et justo pharetra, mattis urna sed, ullamcorper justo. Sed vel ex liber (<button>text in button</button>). Cras a odio non massa sodales imperdiet in non nisi. Fusce eu vulputate urna, sit amet pharetra libero. In accumsan ante a placerat sodales. Maecenas vel ex a diam tempor cursus nec vitae nisi. Fusce ligula mauris, egestas ut hendrerit vel, lacinia sit amet purus. Vivamus maximus eu ante eu convallis.
</p>

Answer 1

A <button> cannot wrap across lines. If there's not enough room for the button on the current line, the entire button will start at the beginning of the next line. A button cannot start on one line and then wrap to the next line. A link can wrap across lines but that's not an appropriate element in this case.

I know you are asking for the left paren '(' to stick with the button but you are essentially asking for the button to wrap, which it can't do.

However, what if the left paren also wrapped to the next line so that it's "paired" with the button? Do you want your text to look like this:

I removed the button styling in your jsfiddle to make it obvious where the button is.

A <button> has a default CSS display of inline-block, which allows it to be inline with the rest of the text but prevents it from splitting across a line. You can apply that same styling to the parentheses too by wrapping them in a <span style="display:inline-block">, essentially making them part of the button text from a wrapping perspective.

<p>
  Lorem ipsum... Sed vel ex liber <span style="display:inline-block">(<button>text in button</button>)</span>. Cras a odio non massa...
</p>