如何让H2内多Span元素单行对齐并固定首Span宽度？

实现代码 #

HTML（仅给第一个span添加类名，其余结构不变）

<h2>
  <span class="fixed-width-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</span>
  <span><button>Deactivate</button></span>
  <span>Lines</span>
</h2>

CSS

h2 {
  display: flex;
  align-items: center; /* 垂直居中所有子元素 */
  gap: 12px; /* 子元素间的间距，可按需调整 */
}

.fixed-width-text {
  width: 350px; /* 设置你需要的固定宽度 */
  overflow: hidden; /* 超出宽度的内容隐藏 */
  text-overflow: ellipsis; /* 溢出部分显示省略号（可选） */
  /* 若需要文本换行显示，删除下面这行 */
  white-space: nowrap;
}

关键样式说明 #

• display: flex：将<h2>转为弹性容器，让内部的<span>按水平方向排列，替代默认的流式布局，从根本上避免文本长度影响右侧元素位置。
• align-items: center：确保按钮、文本、"Lines"在垂直方向上对齐，避免布局错位。
• width: 350px：给第一个文本容器设置固定宽度，无论文本长短，这个容器的尺寸都不会变化，右侧元素位置自然不受影响。
• overflow: hidden：防止超长文本撑破容器宽度，保证布局稳定。
• 可选样式：text-overflow: ellipsis和white-space: nowrap用于处理单行文本溢出的显示效果；如果需要文本在固定宽度内自动换行，删掉white-space: nowrap即可。

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