设置button为display:inline却无法换行，为何与span表现不同？

我希望button能像span一样，以inline方式显示且内部文本可自动换行，但实际表现却和span不一致：示例中两个span可以在同一行开始，长文本自动换行；而两个button则是短button占一行，长button另起一行，且长文本不换行。

代码如下：

.container{
    width:400px;
}
.subcontainer{
    display: inline;
}
button{
  display: inline;
  all:unset;
}

<div class="container">
    <p>1st example with buttons</p>
    <div class="subcontainer">
        <button> This is a short text in buttons </button>
        <button>with a longer text next to it because we need it so it takes mutliple lines to illustrate this issue</button>
    </div>
    <p>2nd example with spans</p>
    <div class="subcontainer">
        <span>This is a short text in spans </span>
        <span>with a longer text next to it becaufdsse we need it so it takes mutliple lines to illustrate this issue</span>
    </div>
</div>

原因分析 #

button元素即使设置了display: inline，仍然属于原子级内联盒子（atomic inline-level box），这类盒子会被浏览器当作一个不可拆分的整体处理：

• 当容器宽度不足时，整个button会被直接推到下一行，无法和前一个内联元素共享同一行空间；
• 同时，原子级盒子内部的文本默认不会自动换行（受浏览器默认渲染规则影响）。

而span是普通内联盒子（non-atomic inline box），它的内容可以和其他内联内容在同一行排列，且内部文本会根据容器宽度自动换行。

解决方案 #

方案1：使用带role="button"的span替代button #

如果不需要button原生的表单控件特性，可以用span模拟按钮，完全实现span的布局表现：

<span role="button" tabindex="0"> This is a short text in buttons </span>
<span role="button" tabindex="0">with a longer text next to it because we need it so it takes mutliple lines to illustrate this issue</span>

需额外补充：

• CSS样式：添加:focus、:active等状态样式确保可访问性；
• JavaScript：实现点击、键盘触发（Enter/Space键）等交互逻辑。

方案2：给button设置display: contents #

display: contents会让button本身不生成布局盒子，其内部文本直接融入父容器的内联流，表现和span完全一致：

button{
  all: unset;
  display: contents;
  cursor: pointer; /* 保留点击指针样式 */
  outline: 1px solid transparent; /* 自定义焦点样式 */
}

注意事项：

• 现代浏览器均支持该属性，兼容性无需过度担心；
• all: unset会移除所有默认样式，需手动添加交互相关样式（如cursor、焦点样式）；
• button的原生交互特性（点击事件、焦点）仍会保留，仅布局行为改变。

方案3：调整button的white-space属性（仅解决内部换行） #

如果仅需要让button内部文本换行，不追求和span完全一致的同行排列效果，可以设置：

button{
  all: unset;
  display: inline;
  white-space: normal;
}

此方案局限性：两个button仍会作为独立原子块存在，无法像span那样在同一行内连续排列并换行。

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