如何让多个<button>标签像<span>一样以连续文本形式显示？

我要在网站上实现和下图样式一致的链接结构：

要求用<button>标签来做，但得让它的显示效果和<span>完全一样。现有代码如下：

<button>Cracked Compass Media</button>
<button>Rubato Chocolate</button>
<button>Teacher Paula G</button>

需要达到和使用<span>标签时相同的排版效果：

<span>Cracked Compass Media</span>
<span>Rubato Chocolate</span>
<span>Teacher Paula G</span>

因为关联的JavaScript功能限制，必须用<button>标签，<a>满足不了需求。之前尝试用CSS的display属性调整，但要么每个按钮自动换行（效果如下）：

Cracked Compass Media <br>
Rubato Chocolate <br>
Teacher Paula Gabriela

要么按钮内的文本被强制拆分换行，变成类似表格的错乱布局：

|    Cracked     |    Rubato        |   Teacher   |   (...)  
|    Compass   |    Chocolate   |   Paula       |
|    Media        |                       |   G             |

本来以为这事很简单，结果现在彻底卡壳了哈哈。

给<button>添加以下CSS样式，就能让它完全模拟<span>的行内排版行为：

button {
  display: inline;
  white-space: normal;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  line-height: inherit;
  cursor: default; /* 可选：不需要点击光标就用这个，需要交互的话保留默认cursor:pointer */
}

关键样式说明 #

• display: inline：把按钮设为行内元素，和<span>一致，不会独占一行，能和其他行内元素自然并排。
• white-space: normal：保证按钮内的文本只在容器边缘或空格处换行，不会强行拆分单词导致错乱。
• 去掉边框、背景、内边距：消除按钮默认的UI样式，让它看起来和普通文本毫无区别。
• font: inherit + line-height: inherit：让按钮文本完全继承父元素的字体样式，确保和周围排版统一。

这样设置后，按钮既能保留JavaScript需要的交互能力，又能完美复刻<span>的排版效果。

内容的提问来源于stack exchange，提问作者Luiz Jales