括号 return 到不需要的行之间的按钮元素

Question

我不想在左括号和按钮元素之间有换行符。

问题：

我想要什么：

我只找到一个解决方案：在按钮样式上添加 display: contents;，但是 this makes the button inaccessible.

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> 不能跨行换行。如果当前行上的按钮没有足够的空间，整个按钮 将从下一行的开头开始。按钮不能从一行开始然后换行到下一行。 link 可以换行，但在这种情况下这不是合适的元素。

我知道您要求左括号“(”与按钮保持一致，但实际上您要求按钮换行，但它无法做到。

但是，如果左括号也换行到下一行以便它与按钮“配对”怎么办？你想让你的文字看起来像这样吗：

我删除了您的 jsfiddle 中的按钮样式，以使其在按钮位置一目了然。

A <button> 的默认值 CSS display 为 inline-block，这允许它与文本的其余部分内联，但防止它拆分成一个线。您也可以将相同的样式应用于括号，方法是将它们包装在 <span style="display:inline-block"> 中，从包装的角度来看，本质上使它们成为按钮文本的一部分。

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

括号 return 到不需要的行之间的按钮元素

Button element between parentheses return to unwanted line

html

css

accessibility