如何用CSS/JS实现垂直Flex列表overflow换行文本的悬挂缩进

纯CSS方案（推荐，无需JavaScript） #

你要的效果可以通过text-indent配合padding-left的组合直接实现，无需修改现有DOM结构，兼容性覆盖所有主流浏览器：

/* 假设你的flex容器类名为list-container */
.list-container > span {
  padding-left: 1.5em;
  text-indent: -1.5em;
  /* 可选：增加条目之间的下间距，进一步强化条目区分度 */
  margin-bottom: 0.4em;
}

实现原理 #

• padding-left: 1.5em 会让span内的所有文本行统一向右偏移1.5em
• text-indent: -1.5em 仅作用于每个span的第一行文本，将其向左回拉1.5em，刚好抵消左padding的偏移
• 最终效果为：第一行文本位置保持原始位置不变，所有自动换行产生的后续行统一向右缩进1.5em，你可以根据设计需求调整1.5em为任意缩进值

完整示例代码 #

<div class="list-container" style="display: flex; flex-direction: column; width: 220px; border: 1px solid #e5e7eb; padding: 12px;">
  <span>这是第一个长度超过容器宽度的列表项，超出部分会自动换行，你可以看到第二行有明显的缩进效果</span>
  <span>这是第二个短列表项，无换行</span>
  <span>这是第三个更长的列表项，内容长度远超容器宽度，会产生多次换行，所有换行后的行都会保持统一的缩进，和其他列表项的区分度极高</span>
</div>

<style>
.list-container > span {
  padding-left: 1.5em;
  text-indent: -1.5em;
  margin-bottom: 0.4em;
}
</style>

特殊场景的JavaScript方案 #

如果需要根据容器宽度、字体大小等参数动态计算缩进值，可以用JS动态生成样式：

const listContainer = document.querySelector('.list-container');
const indentValue = '1.8em'; // 可根据业务逻辑动态计算该值
listContainer.querySelectorAll('span').forEach(span => {
  span.style.paddingLeft = indentValue;
  span.style.textIndent = `-${indentValue}`;
});

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