仅用CSS实现现有标记中文本节点与span的换行

自适应换行方案（容器宽度不足时自动换行） #

.container {
  width: 100px;
  border: 1px solid grey;
}

.title {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}

.badge {
  background-color: grey;
  padding: 2px 6px;
  margin-left: 0;
}

原理说明

• 给.title设置flex布局并开启flex-wrap: wrap，让内部文本和徽章元素能在容器宽度不足时自动换行。
• 用gap: 4px替代原.badge的margin-left，同一行时保持文本与徽章的间距，换行后徽章自动与文本左对齐，避免多余左侧空白，保证布局连贯性。
• 移除h3默认margin，消除默认样式对对齐的干扰。

强制换行方案（徽章始终单独一行） #

如果需要让徽章无论容器宽度如何都单独成行，可使用以下代码：

.container {
  width: 100px;
  border: 1px solid grey;
}

.title {
  margin: 0;
}

.badge {
  background-color: grey;
  padding: 2px 6px;
  margin-left: 0;
  display: block;
  margin-top: 4px;
}

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