如何让<button>以文本链接样式在段落中实现自然换行排版？

要让<button>元素像普通文本一样融入段落文本流并支持跨行换行，核心是让它成为真正的可跨行内联元素，同时保留按钮的无障碍特性。

解决方案 #

将按钮的display设置为inline，补充必要样式确保它完全继承文本属性，同时允许内容自然换行。另外，使用box-decoration-break: clone可让跨行时的下划线等样式在每行完整显示：

.inline-button {
  background: none;
  border: none;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
  display: inline;
  line-height: inherit;
  white-space: normal; /* 确保按钮内文本可换行 */
  box-decoration-break: clone; /* 跨行时样式完整显示 */
}

#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>

关键说明 #

• display: inline：将按钮从默认的inline-block改为纯内联元素，使其能像普通文本一样参与文本流换行。
• white-space: normal：确保按钮内部的文本可以随容器宽度自动换行，避免按钮被整体挤到新行。
• box-decoration-break: clone：解决跨行时文本装饰（如下划线）只在首尾显示的问题，让每行样式保持一致。
• 保留<button>元素：相比改为<a>或<span>，按钮原生支持键盘交互（如Tab聚焦、Enter触发），更符合无障碍设计标准。

内容的提问来源于stack exchange，提问作者Josh Kelley