如何用HTML/CSS实现文本背景包裹效果？现有堆叠方案效果不佳求指导

完全可以实现你想要的效果，不用手动定位堆叠div，推荐用Flex布局+负margin的方式，能自适应每行文本长度，完美衔接圆角背景。

修正后的代码 #

HTML

<body>
  <div class="wrapper">
    <span class="text-line">Hello please work pretty please</span>
    <span class="text-line">Hello please work pretty</span>
    <span class="text-line">Hello please work pretty please please please</span>
  </div>
</body>

CSS

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-line {
  background-color: black;
  color: white;
  padding: 18px 20px;
  border-radius: 15px;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.4;
  margin-top: -10px;
}

.text-line:first-child {
  margin-top: 0;
}

核心思路 #

1. 用Flex容器wrapper垂直排列每行文本，自动居中对齐，避免手动定位的误差
2. 给每行文本设置margin-top: -10px，让相邻行的背景重叠一部分，消除间隙的同时保留圆角衔接效果
3. 第一行去掉负margin，避免整体向上偏移

这个方案能自适应不同长度的文本，不管每行内容长短，背景都会自然衔接，比手动定位的方式灵活得多。

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